0

我有一个图像列表和一个简单的画廊： 

<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 多张图片（7 MB）加载页面需要太长时间，并且 firefox v.21 说：连接已重置。

有没有办法先加载 10-20 张图片，然后再加载其余的（在画廊浏览期间）。
或任何其他解决方案。

注意：无序列表#ulBack 在网页上不可见。

4

2 回答 2

2

鉴于您只需要用于图库导航的图像，请不要设置srcimg 元素。通过设置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>

JS：

function change(){
var goImg = "url(" + $('#ulBack img' + ':eq(' + n +')').attr('data-src') + ")";
$('#divGaLL').css('background-image', goImg);
};
于 2013-07-01T08:28:54.927 回答
1

由于您已经在使用 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();
于 2013-07-01T08:30:01.193 回答