【问题标题】:How can I control how Nivoslider preloads images?如何控制 Nivo Slider 预加载图像的方式?
【发布时间】:2011-03-31 15:42:07
【问题描述】:

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

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

【问题讨论】:

    标签: jquery photo-gallery nivo-slider


    【解决方案1】:

    我一直在寻找类似的解决方案。我在一个网站上有一个图片库,它使用幻灯片插件在主页上加载了十几个高质量的图片。所有这些图像都被一次加载,增加了 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

    【讨论】:

    • 哇,看起来很有希望,谢谢!我将在接下来的几天内进行试驾,我会告诉你结果。
    • 在开发中得到它的工作,我会给你正确的答案,一旦我开始使用这部分,我会在我的博客上感谢你。再一次,很棒的工作!
    • Github 链接已损坏
    【解决方案2】:

    Nivo 滑块没有图像预加载器。如果您使用带有 jQ​​uery 加载事件的滑块(如在 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
        }
       });
    });
    

    【讨论】:

    • 请阅读问题。预加载是问题,而不是解决方案。
    • 如果您使用文档就绪事件预加载是可选的,您可以直接启动滑块。在这种情况下,不会预加载任何图像。我的示例显示,如果您想使用具有自己限制的预加载器,则可以。我将更新示例。
    【解决方案3】:

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

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

    }

    并为使用该功能,提供一个图像网址数组:

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

    【讨论】:

    • 很抱歉,问题不是预加载图像。预加载是问题,而不是解决方案。在这种情况下,它们应该是延迟加载的。
    【解决方案4】:

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

    Nivoslider update or restart or even destroy

    【讨论】:

    • 感谢您的思考,这似乎是一个创意。话虽如此,我越来越多地认为,如果它需要这么多的修补,我应该简单地切换到另一个插件:)
    • @Ferdy 这个想法很简单,如果您希望我根据您自己的代码生成示例,我不介意。
    【解决方案5】:

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

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

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

    【讨论】:

      【解决方案6】:

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

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

      2. 在您的$(window).load(function() {..}); 中添加$('#slider').css('display','block'); 以及您现有的代码,因此它变为:

        $(window).load(function() {
            $('#slider').css('display','block');
        });
        

      【讨论】:

      • 感谢您的回答,但这并不能解决原来的问题。这个建议会延迟整个滑块的加载,而我想要的是让滑块加载而图像要延迟加载。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-06-11
      相关资源
      最近更新 更多