jQuery: any suggestions how to preload all images in dom sequentially?

Question

any ideas about it? any plugin? I want find all img tag and show them sequentially? thank you

Answer 1

Create a small jQuery utility method:

jQuery.preloadImages = function() {
    var set = jQuery('img');
    var current = 0;
    var iterate = function() {
        var current_src = set[current].src;
        var temp = jQuery('<img/>');
        jQuery(temp).bind('load', function() {
            console.log($(this).attr('src') + ' loaded');
            jQuery(this).remove(); //remove temp image from DOM.
        });

        temp[0].src = current_src;
        jQuery('body').append(temp);
        if(++current < set.length) iterate(); //recursive call
    };
    iterate();
};

Invoke this like such:

$.preloadImages();

jsFiddle example