How to implement preloading (so that the site does not load until all the pictures are loaded).

I found this solution but it does not work.

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

    2 answers 2

     function preload(arrayOfImages) { var count_images = arrayOfImages.length; count = 0, i=0; for(i; i < count_images; i++) { var img = new Image(); img.src = arrayOfImages[i]; img.onload = function() { count++; if(count_images-1 == count) { alert('картинки загружены'); } } } } preload([ 'img/1.jpg', 'img/3.jpg', 'img/2.jpg' ]);

      Maybe you need to display the site when the pictures are ready? window.onload will be called when the site is fully loaded. Then you can display a block containing pictures. See also the lazy-load effect on jquery.

      • "Maybe you need to display the site when the pictures are ready?" yes exactly that - Timmi55