4

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

3 回答 3

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>
于 2013-09-17T19:22:23.960 回答
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，您可以在移动设备上检测到，然后将 src 属性替换为适当的 data-src 属性。

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

于 2013-09-17T19:25:01.077 回答
0

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

$('img').remove();

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

$('img').removeAttr('src');
于 2013-09-17T19:23:26.837 回答