Question

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

Answer 1

Working jsFiddle Demo

是的，图片已加载。其中一个解决方案是使用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'));

然后它被加载。

背景图像

Working jsFiddle Demo

另一个解决方案是使用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-image元素上加载none。

Answer 2

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

Answer 3

它有点晚了，但我建议Lazy Load Plugin for jQuery使用Mika Tuupola（至少那是我要做的事情）。

在将图像显示在窗口中并且等待它们具有使图像可见的显示值之前，它不能加载图像。更不用说，它非常易于使用。

一帆风顺。

Answer 4

您似乎可以设置background: none;以阻止background-image加载。见jsfiddle：http://jsfiddle.net/Grsmto/7d15fuhm/4/

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

编辑：示例已更新

Answer 5

您可以使用ajax从文件夹加载图像，然后使用img元素的jQuery.load（）函数。

如果图像设置为display：none，它们仍会加载吗？

5 个答案:

背景图像