防止图像在移动设备上加载
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>
<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');
【讨论】:
以上是关于防止图像在移动设备上加载的主要内容,如果未能解决你的问题,请参考以下文章
我的网站不会在 iPhone 上加载图像,但会在所有其他浏览器、移动设备或桌面设备上加载