用图库加载页面要花费太长时间。
用图库加载页面要花费太长时间。
提问于 2013-07-01 08:22:57
我有一张图片列表和一个简单的画廊：
<ul id="ulBack">
<li><img src="gallery/01.jpg"/></li>
<li><img src="gallery/02.jpg"/></li>
...
</ul> 然后单击prev和next按钮：
function change(){
var goImg = "url(" + $('#ulBack img' + ':eq(' + n +')').attr('src') + ")";
$('#divGaLL').css('background-image', goImg);
};如果我有20-30张图片，可以正常工作，但是加载90+图像(7MB)需要花费太长时间，Firefoxv.21说:连接被重置了。
是否有一种方法，首先加载10-20图像，然后其余(在画廊浏览)。
或者任何其他的解决方案。
备注：无序列表#ulBack在网页上不可见。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-07-01 08:30:01
既然您已经在使用jQuery，那么就试试这个插件吧。在图像在浏览器中可见之前，它不会加载它们。您所要做的就是运行以下代码：
$("#ulBack img").lazyload();该网站有许多例子和提示/建议，例如，它们建议您将类lazy添加到您以后要加载的所有图像中。
HTML
<ul id="ulBack">
<li><img data-src="gallery/01.jpg" style="display:none"/></li>
<li><img data-src="gallery/02.jpg" style="display:none"/></li>
...
</ul>CSS
#ulBack {
display: none;
}JavaScript
$("#ulBack img").show().lazyload();Stack Overflow用户
发布于 2013-07-01 08:28:54
如果您只希望图库导航使用这些图像，则不要设置img元素的src。通过设置src元素，浏览器将向您的服务器发送HTTP请求，以获取图像，这对于大量图像来说代价很高。
你能做的是：
HTML：
<ul id="ulBack">
<li><img data-src="gallery/01.jpg" style="display:none"/></li>
<li><img data-src="gallery/02.jpg" style="display:none"/></li>
...
</ul> 联署材料：
function change(){
var goImg = "url(" + $('#ulBack img' + ':eq(' + n +')').attr('data-src') + ")";
$('#divGaLL').css('background-image', goImg);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17400094
复制相关文章
相似问题
腾讯云开发者
