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（背景）。

如何使nivo滑块中的图像异步加载？

3 个答案: