Question

我正在使用优秀的Nivoslider插件在我的主页上展示一组照片，目前为5.一切正常，但每张照片的页面重量增加约150K。我实际上想要展示大约10个“幻灯片”，但由于所有这些图像都是在页面开头预先加载的，因此页面权重很快会变得太大，特别是因为许多用户可能不会等待“显示”完成。

我想知道是否有可能不预加载图像，或者只是前面的x图像。我在文档中找不到任何关于它的内容，所以我认为它不是本机支持的。有什么想法吗？

Answer 1

我一直在寻找类似的解决方案。我在网站上有一个图库，使用幻灯片插件在主页上加载十几个高质量的图像。并且所有这些图像都会立即加载，并为页面重量添加2-3兆。没有骰子。

Nivo将图像处理留给浏览器。它会读取<img src="...">标签，然后将图像混合成带有光滑过渡效果的幻灯片。代码中没有任何东西可以控制图像的加载或预加载。

幸运的是Nivo在Github上。所以我将它分叉以支持延迟加载图像：

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

Answer 2

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
    }
   });
});

Answer 3

您可以创建一个函数将图像放入数组并预加载

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

并且要使用该函数，请提供一组图片网址：

$.preloadImages("test.png", "/imageUrl");

Answer 4

如果默认情况下在页面加载时，您使用图像的子集初始化滑块。您之后使用jQuery动态创建图像并重新初始化滑块？有关使用ajax调用的示例，请参阅以下内容。

Nivoslider update or restart or even destroy

Answer 5

Burak的答案对我来说很好，但它在Safari中不起作用。我试图修改，这是我的解决方案：

$(window).ready(function() {
   $('#slider').nivoSlider();

它在Safari，IE和Firefox中正常运行。当然，您可以添加受控预载。

Answer 6

您可以隐藏#slider，直到页面加载，然后加载div。

将display:none;附加到CSS文件中的#slider。
在您的$('#slider').css('display','block');中添加$(window).load(function() {..});以及现有代码，因此它会变为：
```
$(window).load(function() {
    $('#slider').css('display','block');
});
```

如何控制Nivo Slider如何预加载图像？

6 个答案: