如果通过将显示属性设置为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'));
然后它被加载.
背景图
另一个解决方案是使用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中不起作用,因为它在无元素上加载了背景图像.
