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

【问题标题】：Prevent image from loading on mobile devices防止图像在移动设备上加载
【发布时间】：2013-09-22 08:56:53
【问题描述】：

为了最大限度地提高移动设备的效率，我宁愿没有用于桌面版本的图像。通过研究了解到，单纯使用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" />

【问题讨论】：

请注意，每个样式表都会被每台设备下载，即使它们不符合媒体查询要求。
如果可以实现，我会使用here 中的信息和modernizr 的媒体查询元素来执行此操作。
这绝对是一个紧迫的话题，我毫不怀疑我们很快就会看到达成一致的解决方案。但我真正欣赏的一种解决方法是使用svg 来处理响应式图像。阅读this article 并尝试他们的方法。

标签： javascript jquery css responsive-design media-queries

【解决方案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>

【讨论】：

虽然这确实是一种常见的做法，但我相信 <img> 和 background-image 之间存在语义差异，所以严格来说这是不好的编码......
@PeterVR 我刚刚发布了答案，我还没有评论。
在 google 搜索中包含精选图片时，Google 似乎不使用背景图片。

【解决方案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 将是一个 1 像素的透明 gif。使用 javascript，您可以在移动设备上检测到，然后将 src 属性替换为适当的 data-src 属性。

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

【讨论】：

Adaptive Images 的技术使用user-agent 来决定设备是否是移动设备。那是not really a good idea。
注意@Tijmen，实际上它使用屏幕大小，它存储在cookie中并与任何请求一起发送，在我的书中，这是特征检测。它具有对默认移动/桌面图像的用户代理检测的回退，这在 imo 中是足够公平的。没有js就意味着体验差。

【解决方案3】：

为了防止图片加载，你可以使用remove()对象函数从你的代码中删除img标签：

$('img').remove();

或者您可以删除 src 属性，注意：如果定义了它们的 CSS 值，例如宽度和高度，并且它们在代码中的位置：

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

【讨论】：