Load images with callback

Question

I have in a page an animation and as the animation keeps playing I want to preload images.

The animation is like an the intro. At the point the animation plays I want to load several images and background images for some elements and the images are loaded then continue make a callback.

For example I want to load the images of an img elements:

<img src="image1.png">
<img src="image2.png">
<img src="image3.png">

and then a few images which are set within the css file:

.figure1{background-image:url('fig1.png')}
.figure2{background-image:url('fig2.png')}
.figure3{background-image:url('fig3.png')}

When all the images are loaded, then continue to the other function.

An example of my animation:

$('#coolanimation').delay(1000).fadeIn("slow", function() {

    // Load images here and when loaded do this:
    $('#intro').fadeOut("slow", function() { $(this).remove();

    });
});

Sanket Sahu · Accepted Answer · 2012-01-28 20:08:44Z

1

May be you need this http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

answered Jan 28, 2012 at 20:08

Sanket Sahu

8,57810 gold badges55 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jQuerybeast Over a year ago

That doesnt allow me make a callback of all the images preloaded

Amit · Accepted Answer · 2012-01-29 02:36:04Z

Images elements have an onload event. Create an array containing the URLs of all the images you want to preload (including those loaded through CSS background-image), instantiate DOM Image objects for each, and keep track of how many have been loaded using a counter.

<script>
var imageList = [
  'image1.png',
  'image1.png',
  'image1.png',
  'fig1.png',
  'fig2.png',
  'fig3.png'
],
imageCountdown = imageList.length; 

$(function(){

  $('#coolanimation').delay(1000).fadeIn("slow");

  // No need to wait for the fadeIn to complete before loading images. Get the preloading happening in the background as soon as possible. 
  $.each(imageList, function(index, item){
    var image = new Image(); // creates a DOM Image object

    // Create the onload handler before setting image src. Cached images trigger "onload" as soon as image src is set, so we need to be prepared for that. 
    image.onload = function(){
      // Decrement the image countdown        
      imageCountdown--;

      image.onload = function(){}; // clear the onload handler. Avoids certain bugs in IE

      if (imageCountdown === 0){
        // if imageCountdown is 0, we've loaded all the images. So now go ahead and trigger the animation
        $('#intro').fadeOut("slow", 
          function (){ 
            $(this).remove();
          }
        );
      }
    };

    // Now that we're prepared for the onload, set the image src
    image.src = item;
  });
});
</script>

It's ok to include CSS images in this algorithm because once you load them, they'll be cached in memory and available for immediate use anywhere in the page.

Jasper · Accepted Answer · 2012-01-28 20:14:20Z

0

How about using the window.load event?

$(window).on('load', function () {
    //run your code here
});

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Source: https://developer.mozilla.org/en/DOM/window.onload

Update

As far as I know you can't bind an event handler to the load event for background-images. It's pretty easy for regular imgs though:

//create array of jQuery objects to add to the DOM later
var arr = [$("<img src='/images/1.jpg' />"), $("<img src='/images/2.jpg' />"), $("<img src='/images/3.jpg' />")];
$(function () {

    //add load event handler to each of the jQuery objects in the array
    for (var i = 0, len = arr.length; i < len; i++) {
        arr[i].on('load', myLoadFunction);
    }

    //now when we add our images to the DOM they will be bound so the event handler will fire even if the image loads very quickly
    $('#my-container').append(arr);
});

edited Jan 28, 2012 at 20:14

answered Jan 28, 2012 at 20:07

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

5 Comments

jQuerybeast Over a year ago

What does this has to do with preloading?

jQuerybeast Over a year ago

An event handler for the load event of a window . <

Jasper Over a year ago

I'm just offering an alternative because I don't believe you can tell in JS when CSS background-images have been loaded. You can load the images in a regular img tag and check when that's loaded, then assume that the image is in cache though.

jQuerybeast Over a year ago

Thank you. I was thinking to preload the background images as such: $(selector).css('background-image','safasef.png');. That will load it when I want to. But if I have many of those how can I create a callback?

Jasper Over a year ago

Search google for "background-image javascript callback load event".

Slopeside Creative · Accepted Answer · 2012-06-19 21:22:49Z

I used Amit's code as the foundation for a function to load images after the user has gone deep into an application, as opposed to before the application begins.

The user makes a series of choices in our application which dynamically determines a series of images to load - up to 5 400x400px pngs. KEY here - I have to ensure the images are loaded BEFORE firing a function call. That function fails if the images are not preloaded. If that function fails, the whole app fails. So, the images have to be there.

Amit's code has been critical in building our function. Thank you. The one thing i added to make it bulletproof in Safari is to insert the image into the DOM. it wasn't working for me w/o doing so. I have placeholder divs with a transparent image and its valid src. In my case, i know how many images and have set them up in advance, but this could be done dynamically before running the code to insert into the div.

in the html:

<div id="hideMe">
<img class="theImgs" id="fake1" src="transparent.png"><img id="fake2" src="transparent.png"> etc...
</div>

in the javascript:

image.src = item; // insert after this line, the two lines below.

// insert image into the DOM, into a hidden div
$("#fake" + imageCountdown).attr('src', '' + item + '');

Collectives™ on Stack Overflow

Load images with callback

4 Answers 4

1 Comment

Comments

Update

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Update

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related