16

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

我想知道是否可以不预加载图像，或者更好，只预加载 x 个图像。我在文档中找不到任何关于它的信息，所以我认为它不受本机支持。有任何想法吗？

4

6 回答 6

20

我一直在寻找类似的解决方案。我在一个网站上有一个图片库，它使用幻灯片插件在主页上加载了十几个高质量的图片。所有这些图像都被一次加载，增加了 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优先于这意味着您可以为非 JavaScript 用户src指定低分辨率版本，或填充间隔图像，以便 HTML 将通过验证器。 srcsrc

一探究竟！我正在几个项目中实施它。此处提供演示：http: //powers1.net/files/nivo/demo/demo-lazy.html

于 2012-04-05T05:09:07.977 回答
1

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
    }
   });
});
于 2012-04-04T21:49:22.227 回答
0

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

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

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

于 2012-06-14T10:28:46.953 回答
0

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

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

}

并为使用该功能，提供图像网址数组：

$.preloadImages("test.png", "/imageUrl");
于 2012-04-04T11:52:07.973 回答
0

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

Nivoslider 更新或重启甚至销毁

于 2012-04-04T21:14:01.377 回答
-1

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

  1. 附加display:none;到#slider您的 CSS 文件中。

  2. 添加$('#slider').css('display','block');您$(window).load(function() {..});的现有代码，使其变为：

    $(window).load(function() {
    $('#slider').css('display','block');
});
于 2011-08-30T05:05:53.600 回答