jquery – 如果图像被设置为显示：它们是否仍然加载？

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

解决方法

Working jsFiddle Demo

是的,图像被加载.其中一个解决方案是使用src的另一个属性：

<img src="http://placekitten.com/300/300?" />
<img src="http://placekitten.com/400/400?" />
<img 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中不起作用,因为它在无元素上加载了背景图像.