如果通过将 display 属性设置为 来隐藏图像,none
浏览器是否仍会通过 HTTP 请求加载该图像文件?因为我有一个图像列表,所以它们的显示属性设置为none
,除了第一个图像是默认图片。一旦用户单击下一步按钮,我想显示图像 2 并将其他图像的显示属性设置为none
. 我要求这样做以使我的网站更快。
问问题
16923 次
5 回答
14
是的,图像已加载。一种解决方案是使用另一个属性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'));
然后它被加载。
背景图片
另一种解决方案是使用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
onnone
元素。
于 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 回答