如何使 nivoslider 中的图像异步加载？答案

【问题标题】：How to make the images in the nivoslider loaded asynchronised?如何使 nivoslider 中的图像异步加载？
【发布时间】：2012-05-20 18:50:12
【问题描述】：

对于我正在开发的网站，我必须使用 nivoslider 幻灯片插件。问题是我们有十多个更高分辨率的图像。因此，为了加载页面需要花费太多时间。有没有什么选项可以让我们在完全渲染页面后加载这些图像？还是一张一张地加载图片，而不是一开始就加载所有的图片？

【问题讨论】：

标签： javascript jquery ajax nivo-slider

【解决方案1】：

看看http://webgalli.com/blog/beautiful-jquery-home-page-slideshow-with-translations/

【讨论】：

【解决方案2】：

我认为不可能让 nivo 滑块加载图像，但您可以使用 javascript 加载图像，然后运行滑块。

为此，您必须： 1. 为只有第一个图像的滑块图像创建 div 2. 创建带有 url 到其余图像的 javascript 数组 3. 运行 js 函数，该函数将在页面仅加载第一张图像后为其余图像创建代码 4. 当剩下的图片准备好时，运行 nivo 滑块。

可能是这样的：

html代码

 <div id="sliderWrapper">
   <img src="/myfirstsliderimage.jpg" />
 </div>

javascript 代码（假设使用 jquery）

var sliderImages = ['/path/to/secondimage.jpg', '/path/to/thirdimage.jpg',
                     '/path/to/forthimage.jpg'];
var imagesLoaded = 1;  //set to one as the first image is loaded with the page

$(document).ready(function(){
  for(i in sliderImages) {
    //create new img element
    var img = $('<img></img>').attr('src', sliderImages[i]).attr('id','sliderImg_'+i);  

    //append to slider wrapper
    $('#sliderWrapper').append(img);  

    //after image is loaded increase the counter, 
    //it will tell us when to start slider
    $('#sliderImg_'+i).load(function(){imagesLoaded += 1;});  
  }

  //after inserting images run nivo slider
  runNivoSlider();
});

function runNivoSlider() {
  if (imagesLoaded == $('#sliderWrapper img').length) {
    //all images are loaded, we can run nivo slider
    $('#sliderWrapper').nivoSlider();
  }
  else {
    //something is still missing try in 300 ms
    setTimeout(function(){runNivoSlider();}, 300);
  }
}

【讨论】：

【解决方案3】：

另一种解决方法是显示第一个滑块的图像而不是加载 gif（背景）。

【讨论】：