我正在使用出色的 Nivoslider 插件在我的主页上展示一组照片，目前是 5 张。一切正常，但每张照片增加了大约 150K 的页面重量。我实际上想展示大约 10 张“幻灯片”，但由于所有这些图片都是在页面打开时预加载的，页面重量很快就会变得（太大），特别是因为许多用户可能不会等待“展示”完成。
我想知道是否有可能不预加载图像，或者更好，只有 x 个图像。我在文档中找不到任何关于它的信息，所以我认为它不受本机支持。有什么想法吗？
【问题讨论】：
标签： jquery photo-gallery nivo-slider
我一直在寻找类似的解决方案。我在一个网站上有一个图片库，它使用幻灯片插件在主页上加载了十几个高质量的图片。所有这些图像都被一次加载，增加了 2-3 兆的页面重量。没有骰子。
Nivo 将图像处理留给浏览器。它会读取<img src="..."> 标签，然后将图像拼凑成带有流畅过渡效果的幻灯片。代码中没有任何内容可以控制图像的加载或预加载。
幸运的是，Nivo 在 Github 上。所以我 fork 来支持图片的延迟加载：
https://github.com/leepowers/Nivo-Slider
用法相同。对 HTML 进行一点小改动
<div id="slider">
<img src="my-large-image.jpg" alt="">
<img src="my-large-image2.jpg" alt="">
<img src="another-biggun.jpg" alt="">
</div>
将图片src属性改为data-src属性：
<div id="slider">
<img data-src="my-large-image.jpg" alt="">
<img data-src="my-large-image2.jpg" alt="">
<img data-src="another-biggun.jpg" alt="">
</div>
由于data-src 未被解析，因此在 Nivo 准备好使用它们之前不会加载图像。 data-src 优先于src，这意味着您可以在src 中为非javascript 用户指定低分辨率版本，或者使用间隔图像填充src，以便HTML 将通过验证器。
看看吧！我正在几个项目中实施它。此处提供演示：http://powers1.net/files/nivo/demo/demo-lazy.html
【讨论】：
Nivo 滑块没有图像预加载器。如果您使用带有 jQuery 加载事件的滑块（如在 nivo 的演示中），nivo 滑块将等到页面中加载所有图像。
$(window).load(function() {
$('#slider').nivoSlider();
});
如果您不想等到所有图像都加载完毕，您可能更喜欢下面的文档就绪事件。不会预加载任何图像。
$(document).ready(function() {
$('#slider').nivoSlider();
});
如果你想有一个受控的预加载； 您可以使用 jQuery 的图像预加载插件之一，例如； http://www.farinspace.com/jquery-image-preload-plugin/
$(document).ready(function() {
$('#slider').nivoSlider();
//Before starting the slider preload your images then start your slider.
$.imgpreload(['/images/a.gif','/images/b.gif'],
{
all: function()
{
//Start slider here
}
});
});
【讨论】：
您可以创建一个函数将图像放入数组中并预加载
jQuery.preloadImages = function() {
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
并为使用该功能，提供一个图像网址数组：
$.preloadImages("test.png", "/imageUrl");
【讨论】：
如果默认情况下在页面加载时使用图像子集初始化滑块会怎样。之后您使用 jQuery 动态创建图像并重新初始化滑块？有关使用 ajax 调用的示例，请参见以下内容。
【讨论】：
Burak 的回答对我来说很好，但它在 Safari 中不起作用。 我尝试修改，这是我的解决方案：
$(window).ready(function() {
$('#slider').nivoSlider();
它可以在 Safari、IE 和 Firefox 中正常运行。当然，您可以添加受控的预加载。
【讨论】：
你可以隐藏#slider直到页面加载，然后加载div。
将 display:none; 附加到 CSS 文件中的 #slider。
在您的$(window).load(function() {..}); 中添加$('#slider').css('display','block'); 以及您现有的代码，因此它变为：
$(window).load(function() {
$('#slider').css('display','block');
});
【讨论】：