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

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>