CODEWITHSUNDEEP
javascripthtmlcssimage
André
André

Reputation: 307

How to preload images

I'm trying to preload images on my web page. I've seen a lot of discussions about it and most of them suggest to create an Image object then edit the src attribute. However this doesn't work on the latest versions of Chrome and Firefox. The request is marked as "pending" until the image is actually shown on the page and then I can notice a little delay before the image to be shown. Even creating an actual img tag on the page (with display:none) doesn't work until the image is shown. And finally when I try the following code, only the last image of the loop is actually loaded

var img = document.getElementById('some_visible_image');
for(var i=1;i<5;i++)
    for(var j=1;j<3;j++){
        img.src = 'images/'+i+'_'+j+'_green.png';
        img.src = 'images/'+i+'_'+j+'_orange.png';
        img.src = 'images/'+i+'_'+j+'_red.png';
    }

So how can I reduce the loading time of the images (without using large sprites)?

Upvotes: 3

Views: 188

Answers (3)

Jan Turoň
Jan Turoň

Reputation: 32922

You need to create instance for every image

// redirect after all the images are preloaded
function redirect() {
  location.href = "yourtargetpage.html";
}

// should solve the first-time-load problem
var loads = 0;
function loaded() {
  // the total number of images needed to load
  if(++loads==42) redirect();
}

// if all the images aren't loaded in 3 seconds, don't wait further
setTimeout(redirect, 3000);

for(var i=1;i<5;i++)
for(var j=1;j<3;j++){
  var img = new Image();
  img.src = 'images/'+i+'_'+j+'_green.png';
  if(img.complete) loaded(); // if cached, onload isn't fired sometimes
  else img.onload = loaded; // fires for the first time the page loads
}

or the src is overwritten before the image has a chance to load.

To show your images immediately after the first load, you may run this script on a different page, wait until every image

Upvotes: 3

Andr&#233;
Andr&#233;

Reputation: 307

I found the solution, thanks to Jan Turoň's answer. Here is my code :

for(var i=1;i<=5;i++)
    for(var j=1;j<=3;j++){
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_green.png';
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_orange.png';
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_red.png';
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_grey.png';
    }

Upvotes: 1

Mischa
Mischa

Reputation: 99

Try visibility:hidden; instead of display:none;

Upvotes: 0

Related Questions