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

时间:2013-09-17 19:11:35

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

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

3 个答案:

答案 0 :(得分:6)

当需要此级别的优化时,通常会通过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>

答案 1 :(得分:1)

这有多种方法。我个人喜欢他们在这里使用的技术: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,你可以在移动设备上检测到,然后用适当的data-src属性替换src属性。

这应该是一个简单的解决方案,但在图像开始加载之前需要你的js ru,并且从技术上讲它在语义上是不正确的。此外,搜索引擎也会将您的图像编入索引。

答案 2 :(得分:0)

要阻止加载图片,您可以使用remove()对象功能从代码中删除img代码:

$('img').remove();

或者你可以删除src属性,注意:如果定义了它们的CSS值,如宽度和高度,并在代码中有它们的位置:

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