0

I really need some suggestions on how to fire events depending on the proceed of preloading images. On my site i have lots of large images, where the most of them are display: none. For avoiding image flickering and co i have read this POST and the answer seems a good way for preloading to me.

But what i want to do is firing events at a specific status of preloading. Let's say i have around 40 images, and i want to fire an event at every tenth image which is already loaded, how could i handle this?

One sentence about my intention. I would like to create my own loading-screen. A little animation whose process is dependent on the process of the preloaded-images.

Something like:

first10picturesloaded(){ /* do something */ }
next10picturesloaded() { /* do something more */ }
...

Thanks in advance!

Edit: As requested this is the preload-snippet

 function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
    $('<img/>')[0].src = this;
});
    }

    preload([
'img/about_1.gif',
'img/about_2.gif',
'img/contact_2.gif',
'img/contact.gif',
'img/digital_1.gif',
'img/digital_2.gif',
'img/dragged.gif',
'img/loading.gif',
'img/photo_1.gif',
'img/photo_2.gif',
'img/print_1.gif',
'img/print_2.gif',
'img/web_1.gif',
'img/web_2.gif',
'img/about.jpg']); //there are much more pictures in the array
Community
  • 1
  • 1
supersize
  • 13,764
  • 18
  • 74
  • 133
  • Could you please share a link to your current site or jsFiddle? I'm thinking about using custom jQuery events: http://api.jquery.com/trigger/ – Juan Guerrero Jun 23 '13 at 21:56
  • actually i can't show the site, but i have edited my answer with the preload script i am using from the referred post. – supersize Jun 23 '13 at 22:04

1 Answers1

0

untested

function preload(arrayOfImages, onLoadFunc) {
    $(arrayOfImages).each(function(val){
        $('<img/>').on("load", onLoadFunc).attr("src", val);
    });
}
var remaining = arrayOfImages.length;
preload(arrayOfImages, function(){
    remaining--;
    if (remaining % 10 == 0) {
        //progress
    } else if (remaining == 0) {
        //finished
    }
});

a robust implementation would also listen to the error and abort events of the images. Otherwise, one image failing to load would cause the completion to never occur.

goat
  • 31,486
  • 7
  • 73
  • 96
  • despite the `error` and `abort` part it gives me a `var` error of `arrayOfImages is undefined`. I should nest both in a `$(document).ready()` right? – supersize Jun 23 '13 at 23:03