javascript - 如何使 nivoslider 中的图像异步加载？

Question

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

Answer 1

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

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

Answer 3

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