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

Posted

技术标签:

【中文标题】防止图像在移动设备上加载【英文标题】: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"
    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 并尝试他们的方法。 【参考方案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>

【讨论】:

虽然这确实是一种常见的做法,但我相信 &lt;img&gt;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');

【讨论】:

以上是关于防止图像在移动设备上加载的主要内容,如果未能解决你的问题,请参考以下文章

我的网站不会在 iPhone 上加载图像,但会在所有其他浏览器、移动设备或桌面设备上加载

使用颤振在移动设备上缓存图像

为啥我的图片只能在桌面上加载,而不能在移动设备上加载?

站点背景图像在 PC 上完美运行,但它们不会出现在移动设备上

阻止视频在移动设备的后台加载

网站仅在移动设备上加载不一致