CODEWITHSUNDEEP
javascriptjqueryajaxnivo-slider
Mic
Mic

Reputation: 427

How to make the images in the nivoslider loaded asynchronised?

For the website I am working on I had to use the nivoslider slideshow plugin. The problem is that we have more than ten images of higher resolutions. So inorder to load the page its taking too much time. Is there any option so that we can load this images after rendering the page completely? Or load the images one by one instead of loading all the images at the beginning?

Upvotes: 1

Views: 3465

Answers (3)

Pascal
Pascal

Reputation: 1

Another workaround solution would be to display the very first slider's image instead of the loading gif (background).

Upvotes: 0

Zefiryn
Zefiryn

Reputation: 2265

I don't think it is possible to make nivo slider load images but you may load images with javascript and after that run the slider.

To do that you must: 1. Create div for slider images with only the first image 2. Create javascript array with url to the rest of the images 3. Run js function that will create code for the rest of the images once the page is loaded with only the first image 4. When the rest of the imagess are ready run nivo slider.

It could look like that:

html code

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

javascript code (assuming using 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);
  }
}

Upvotes: 1

user632347
user632347

Reputation: 835

Have a look at http://webgalli.com/blog/beautiful-jquery-home-page-slideshow-with-translations/

Upvotes: 1

Related Questions