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 ?

"will it work?" You won't be able to know till you test it.. Try the code and if you have a problem then tell us! — Jihed Jaouabi, Apr 02 '14 at 11:11
There is a similar code here: http://stackoverflow.com/questions/476679/preloading-images-with-jquery — naota, Apr 02 '14 at 11:16

score 2 · Answer 1 · answered Apr 02 '14 at 11:11

2

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, i.e. where images are not shown initially, but when some page activity occurs (e.g. when a new widget containing one of precached images is created and displayed.)

answered Apr 02 '14 at 11:11

Andrew Dunai

3,061
19
27

Yes, my images will not shown initially. Should I put this code (from my question) inside `$(document).ready(function () {})` ? – truslivii.lev Apr 02 '14 at 11:19

naota · Answer 2 · 2014-04-02T11:53:06.687

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.

image preload using jQuery or JavaScript

2 Answers2