image preload using jQuery or JavaScript

Question

I need to use a lot of images in my slideshow and I would like to preload it before the using.
I used this code

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

$(['../img/portfolio_arrko_1.jpg', '../img/portfolio_arrko_2.jpg', '../img/portfolio_arrko_3.jpg', '../img/portfolio_arrko_4.jpg', '../img/portfolio_arrko_5.jpg', '../img/portfolio_arrko_6.jpg', '../img/portfolio_arrko_7.jpg', '../img/portfolio_politics_1.jpg', '../img/portfolio_politics_2.jpg', '../img/portfolio_politics_3.jpg', '../img/portfolio_politics_4.jpg', '../img/portfolio_politics_5.jpg', '../img/portfolio_politics_6.jpg', '../img/portfolio_politics_7.jpg', '../img/portfolio_city_1.jpg', '../img/portfolio_city_2.jpg', '../img/portfolio_city_3.jpg', '../img/portfolio_city_4.jpg', '../img/portfolio_city_5.jpg', '../img/portfolio_city_6.jpg', '../img/portfolio_invest_1.jpg', '../img/portfolio_invest_2.jpg', '../img/portfolio_invest_3.jpg', '../img/portfolio_invest_4.jpg', '../img/portfolio_nidec_1.jpg', '../img/portfolio_nidec_2.jpg', '../img/portfolio_nidec_3.jpg', '../img/portfolio_nidec_4.jpg', '../img/portfolio_nidec_5.jpg', '../img/portfolio_nidec_6.jpg', '../img/portfolio_nidec_7.jpg', '../img/portfolio_nidec_8.jpg', '../img/portfolio_nidec_9.jpg', '../img/portfolio_nidec_10.jpg', '../img/portfolio_nidec_11.jpg', '../img/portfolio_zavod_1.jpg', '../img/portfolio_zavod_2.jpg', '../img/portfolio_zavod_3.jpg', '../img/portfolio_zavod_4.jpg', '../img/portfolio_zavod_5.jpg', '../img/portfolio_zavod_6.jpg', '../img/portfolio_zavod_7.jpg', '../img/portfolio_zavod_8.jpg', '../img/portfolio_zavod_9.jpg', '../img/portfolio_razvitie_1.jpg', '../img/portfolio_razvitie_2.jpg', '../img/portfolio_razvitie_3.jpg', '../img/portfolio_razvitie_4.jpg', '../img/portfolio_razvitie_5.jpg', '../img/portfolio_razvitie_6.jpg', '../img/portfolio_rzanik_1.jpg', '../img/portfolio_rzanik_2.jpg', '../img/portfolio_rzanik_3.jpg', '../img/portfolio_rzanik_4.jpg', '../img/portfolio_rzanik_5.jpg', , '../img/portfolio_rzanik_6.jpg', '../img/portfolio_sport_1.jpg', '../img/portfolio_sport_2.jpg', '../img/portfolio_sport_3.jpg', '../img/portfolio_sport_4.jpg', '../img/portfolio_sport_5.jpg', '../img/portfolio_sport_6.jpg', '../img/portfolio_sport_7.jpg', '../img/portfolio_sport_8.jpg', '../img/portfolio_stal_1.jpg', '../img/portfolio_stal_2.jpg', '../img/portfolio_stal_3.jpg', '../img/portfolio_stal_4.jpg', '../img/portfolio_stal_5.jpg', '../img/portfolio_stal_6.jpg', '../img/portfolio_stal_7.jpg', '../img/portfolio_stal_8.jpg', '../img/portfolio_stal_9.jpg', '../img/portfolio_hleb_1.jpg', '../img/portfolio_hleb_2.jpg', '../img/portfolio_hleb_3.jpg', '../img/portfolio_hleb_4.jpg', '../img/portfolio_hleb_5.jpg', '../img/portfolio_hleb_6.jpg', '../img/portfolio_elit_1.jpg', '../img/portfolio_elit_2.jpg', '../img/portfolio_elit_3.jpg', '../img/portfolio_elit_4.jpg', '../img/portfolio_elit_5.jpg']).preload();

but I'm not sure, will it work? maybe, is there any better way to do it ?

Answer 1

This will work, however note that this process will not defer DOM-ready-event . This means that places of their actual use may be displayed while images are not yet loaded.

This method would be fine for dynamic web applications, ie where images are not shown initially, but when some page activity occurs (eg when a new widget containing one of precached images is created and displayed.)

Answer 2

As @Andrew mentioned, you might want to get to know when all images are fully loaded. To do this, you can count the number of loaded images like this:

<script language="javascript">
$(function() {

    var $imgs = $(['1.jpg', '2.jpg', '3.jpg']);// Please chenge to actual image paths.
    var num_total = $imgs.length;
    var num_loaded = 0;

    $.fn.preload = function() {
        this.each(function(){
            $("<img/>").attr("src", this).load(function() {
                num_loaded++;
                if (num_loaded >= num_total) {
                    // Now all images are fully loaded. 
                    // You can start your great slideshow.
                    alert("preload complete");
                }
            });
        });
    }

    $imgs.preload(); // call above function

});
</script>

Hope this helps.