Download all images before running jQuery Slideshow

Question

I modified Visual Idiot Unslider ( http://unslider.com/ ) to place slides with multiple widths based on the aspect ratio of the image, but in the process I ran into an error that causes the slides to load as thumbnails (I think in the case of when images are not fully loaded). This is problem number 1. Therefore, I am trying to wait for all images to load. But I did not find a way to do this successfully. This is problem number 2.

Here is my added code inside the Unslider init () function:

_.init = function(el, o) { // Check whether we're passing any options in to Unslider _.o = $.extend(_.o, o); _.el = el; _.ul = el.find(_.o.items); _.max = [el.outerWidth() | 0, el.outerHeight() | 0]; _.max = [100, 100]; _.li = _.ul.find(_.o.item).each(function(index) { var me = $(this); var an_image = me.find('img'); an_image.load(function() { width = an_image[0].naturalWidth, height = an_image[0].naturalHeight; setSlideHeight(an_image, width, height, 300, 20); if ( an_image.parent().parent().is(":last-child") ) { _.el.css("width", 900); } }) // Set the max values //if (width > _.max[0]) _.max[0] = width; //if (height > _.max[1]) _.max[1] = height; }); 

And here is my partial Ruby with a built-in script to run Unslider when all the images load.

 <% if @page.cap_gallery_images.any? %> <script> $(document).ready(function() { var numLoaded = 0; var numToLoad = $('#gallery img').length; alert("To Load: " + numToLoad); $('#gallery img').load(function(){ numLoaded += 1; alert("Loaded: " + numLoaded); if (numLoaded == numToLoad) { var gallery = $('#gallery').unslider(), data = gallery.data('unslider'); data.to(0); } }); $("#slidecontainer .slide a").click(function(e) { destination = $(this).parent().index(); data.to(destination); e.preventDefault; }); $(window).scroll(function() { checkGalleryAgainstLogo(); }); $(window).resize(function() { checkGalleryAgainstLogo(); }); checkGalleryAgainstLogo(); $('#logo.small').addClass('white'); }); </script> <% end %> 

The problem is that it seems that the image loading handlers do not all start. Look at this in context on the page I use it on: http://penumbra-2.herokuapp.com/education

Answer 1

Regarding # 2: I think you made it too complicated. You do not need to check individual img assets as you do; you really just want to know when the whole gallery loaded, so make your life simple:

  $('#gallerycontainer').load(function(){ $('#gallery').unslider(); } }); 

You might want to add HTML in your question so that people know how to target jQuery:

 <div id="gallerycontainer"> <div id="gallery"> <div id="slidecontainer"> <div class="slide"> <a href="#"><img /></a> </div> </div> </div> </div> 

Answer 2

A load event is dispatched to an element when it and all sub-elements have been fully loaded. .load is what you need. The advantage of using this is that you can attach it to a subset of the DOM. If you have images in this section

 <div class="slider"> <img src="image1.jpg"/> <img src="image2.jpg"/> <img src="image3.jpg"/> </div> 

Now you can use .load only in the slide show container if all the images are uploaded.

 $('.slider img').load(function(){ //Your code goes here }); 

ATTENTION: If you are using jQuery 1.8, this is deprecated. You can use .on with the corresponding arguments, for example .on('load', handler)

Answer 3

I see two different solutions on this issue and it depends on your goal.

In the code you use $(document).ready(); that starts when the DOM is ready, and not when the assets are fully loaded, it makes sense to detect when the image is loaded, but in this case I would go to use my own Image () object and avoid using .load() , since I found it extremely unreliable in a few cases, and as far as I know, sometimes it doesn’t work fine if the images are downloaded from the browser cache.

 $('#gallery img').each(function() { var currentimage = new Image(); currentimage.src = this.src; currentimage.onload = function(){ numLoaded += 1; alert("Loaded: " + numLoaded); if (numLoaded == numToLoad) { var gallery = $('#gallery').unslider(), data = gallery.data('unslider'); data.to(0); } }; }); 

Another solution (which I prefer to use here) is to use window.onload , which starts when your document and assets are fully loaded, and you should use it this way:

 window.onload = function(){ // Initialise your slider here } 

Answer 4

Try this (Figure)

HTML

 <!-- load images container, images with document, `display:none` --> <div id="slidecontainer" style="display:none;"> <div class="slide"> <a href="#"> <img alt="Chemistry-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/chemistry-1.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Hamilton" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Hamilton.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Platinum6" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/platinum6.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Lectures-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/lectures-1-2.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Lenses-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/lenses-1-2.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Bromoil-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/bromoil-1.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Platinum2-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/platinum2-1.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Schaefer2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Schaefer2.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Classroom-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/classroom-1-2.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Dagbeq_web" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/dagbeq_web.jpg" /> </a> </div> <div class="slide"> <a href="#"> <img alt="Carbon_schaefer" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Carbon_Schaefer.jpg" /> </a> </div> </div> <div id="gallerycontainer"> <div id="gallery" style="margin-top: 67px;"></div> </div> 

Js

 // hold jquery `ready` `event` $.holdReady(true); // load images container, images into `slider` container $("#gallery").load(document.location.href + " #slidecontainer", function(data, textStatus, jqxhr) { // if all images loaded (11), document.ready, release `holdReady` return ($("#gallery img").length === 11 && $.isReady && jqxhr.state() === "resolved" ? $.when($.holdReady(false)).done(function() { alert($.isReady); $("#slidecontainer").css("display", "block"); // images appended to document, // do (`slider`) stuff }) : alert(!$.isReady) ) }); 

jsfiddle http://jsfiddle.net/guest271314/tLca3/

Answer 5

There is a library specially created for this, which I always use when working with image loading, since it also processes cached images. You can find it at https://github.com/desandro/imagesloaded

You can call it in the entire list of images, and jQuery is optional when using it.

Answer 6

The DOM ready event waits until the DOM is fully loaded before its callback starts. However, the load event (window) does not trigger its callback until the DOM and all images are fully loaded. This is the event you want to target:

 $(window).load(function() { //Wait till DOM and images are fully loaded //The run the code in here //**This is where/when to initialize the plugin.** }); 

The load event is dispatched to an element when it and all subelements have been fully loaded. This event can be sent to any element associated with the URL: images, scripts, frames, iframes and window objects.