Question

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

<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未在网页上显示。

Answer 1

鉴于您希望图像仅用于图库导航，请不要设置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>

JS：

function change(){
var goImg = "url(" + $('#ulBack img' + ':eq(' + n +')').attr('data-src') + ")";
$('#divGaLL').css('background-image', goImg);
};

Answer 2

由于您已经在使用jQuery，请尝试this plugin。它不会在浏览器中显示之前加载图像。您所要做的就是运行以下代码：

$("#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();

使用图库加载页面需要太长时间

2 个答案: