14

如果通过将 display 属性设置为 来隐藏图像，none浏览器是否仍会通过 HTTP 请求加载该图像文件？因为我有一个图像列表，所以它们的显示属性设置为none，除了第一个图像是默认图片。一旦用户单击下一步按钮，我想显示图像 2 并将其他图像的显示属性设置为none. 我要求这样做以使我的网站更快。

4

5 回答 5

14

工作 jsFiddle 演示

是的，图像已加载。一种解决方案是使用另一个属性src：

<img data-src="http://placekitten.com/300/300?" />
<img data-src="http://placekitten.com/400/400?" />
<img data-src="http://placekitten.com/500/500?" />

然后，当您想显示其中一个时，只需将其src 属性设置为其data-src：

// showing the second one
var $img = $('img').eq(1);
$img.attr('src', $img.attr('data-src'));

然后它被加载。

背景图片

工作 jsFiddle 演示

另一种解决方案是使用background-image而不是img标签，在这种情况下，它不会加载，直到它变得可见：

<div class="div-as-image" style="background-image: url(http://placekitten.com/300/300?);"></div>
<div class="div-as-image" style="background-image: url(http://placekitten.com/400/400?);"></div>
<div class="div-as-image" style="background-image: url(http://placekitten.com/500/500?);"></div>

在你的 CSS 中：

.div-as-image {
    width: 500px;
    height: 100px;
    display: none;
}

现在，如果你让其中一个可见，它的图像就会被加载：

// showing the second one
var $div = $('.div-as-image').eq(1);
$div.css('display', 'block');
  • 此方法在 Chrome 中不起作用，因为它也加载了background-imageonnone元素。
于 2013-06-01T14:13:09.843 回答
7

是的。图像已加载，由于 CSS 规则，它只是不可见。

于 2013-06-01T14:04:57.773 回答
2

有点晚了，但我建议使用 Mika Tuupola 的Lazy Load Plugin for jQuery（至少我会这样做）。

在图像将显示在窗口中之前不加载图像，并且还等待它们具有使图像可见的显示值，它做得很好。更不用说，它很容易使用。

神速。

于 2014-11-06T14:39:29.767 回答
-2

您可以使用 ajax 从文件夹中加载图像，然后为 img 元素加载 jQuery.load() 函数。

于 2013-06-01T14:07:08.190 回答
-2

看来你可以设置background: none;防止background-image加载。见jsfiddle：http: //jsfiddle.net/Grsmto/7d15fuhm/4/

在 Chrome 39 上测试。对于 Firefox 34，display: none;就足够了。

编辑：示例更新

于 2014-12-01T20:03:21.130 回答