防止图像在移动设备上加载

Question

为了最大限度地提高移动设备的效率，我宁愿没有用于桌面版本的图像。通过研究，我了解到简单地使用

display:none;

css 或

jQuery('img').hide()

只会隐藏图像，但仍然使用资源来加载它。

我该如何接受这个：

<div class="com_router_img">
<img src="http://www.example.com/wp-content/uploads/2013/05/img.jpg"
 alt="img" width="700" height="350" class="aligncenter size-full wp-image-307" />
</div>

并且不在我的移动样式表上显示它？这是移动样式表查询：

<link rel="stylesheet" media='screen and
 (-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.5)'
 href="<?php bloginfo('template_url'); ?>/smallphone.css" />

Answer 1

当需要这种级别的优化时，通常的做法是通过 CSS 使用图像作为背景图像。移动浏览器只会加载它所应用的 CSS。

CSS

<style>
@media (max-width:600px) {
   .image {
      display:none;
   }
}
@media (min-width:601px) {
   .image {
      background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
      width:700px;
      height:350px;
   }
}
</style>

HTML

<div class="image">

</div>

Answer 2

对此有多种方法。我个人喜欢他们在这里使用的技术：http://adaptive-images.com/

它使您的代码保持简单并且 HTML 语义正确

你也可以编写自己的js解决方案。

您的 HTML 可能如下所示：

<img alt='some image' src='blank.gif' data-src-mobile='my-mobile-version.jpg' data-src-desktop='my-desktop-version.jpg />

blank.gif 是一个 1px 的透明 gif。使用 javascript，您可以检测是否在移动设备上，然后将 src 属性替换为适当的 data-src 属性。

这应该是一个简单的解决方案，但它需要你的js在图像开始加载之前运行，从技术上讲它在语义上是不正确的。此外，搜索引擎在索引您的图像时也会遇到麻烦。

Answer 3

为了防止加载图像，您可以使用

remove()

对象函数从代码中删除

img

标签：

$('img').remove();

或者您可以删除

src

属性，注意：它们有自己的 CSS 值，例如宽度和高度（如果已定义），并且在代码中具有它们的位置：

$('img').removeAttr('src');

Answer 4

为了确保图像仅在桌面设备上加载，而不在移动设备上加载，您可以使用 HTML 元素并将其与媒体查询结合起来。该元素允许您为图像定义多个源，浏览器将根据媒体查询和设备的功能选择最合适的一个。

以下是如何修改代码来实现此目的：

<div class="image_holder">
    <picture>
        <source media="(min-width: 768px)" srcset="assets/images/background/bg_0.avif">
        <!-- The img tag below is a fallback and will use the source defined above if the media query matches -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Overflow Image">
    </picture>
</div>

这是发生的事情：

具有

media="(min-width: 768px)"

属性的元素告诉浏览器仅在视口宽度为 768 像素或更大（通常是桌面屏幕）时才使用

bg_0.avif

图像。 该标签充当后备。如果元素中的媒体查询均不匹配，则浏览器将使用标记中指定的图像。在本例中，我们使用一个微小的透明 GIF 作为占位符，因此移动设备上不会加载任何实际图像。

这样图片只会在桌面设备上加载，移动设备不会加载，节省资源。