My images aren't updating immediately upon changing their src in javascript

Question

I'm using the function below to change the img src. It's an array of ten images. When going through the loop, using break points, the images don't all update on the page immediately. Some of them do. If I inspect the unchanged images on the page (while paused at a breakpoint), the src has changed, but the image hasn't changed yet. All of the unchanged images get updated correctly when the function ends. Anyone know why they don't all get updated instantly and how I can force them to update? Also, is there a way I can hold off the updates of all of them until they're all reassigned and thus have them all update on the "simultaneously"? Here's my function.

function mainFunction(){
    finalSet = calculateSet();
    for ( var int = 0; int < finalSet.length; int++) {
        var fileName = "cardImg" + (int);
        document.getElementById(fileName).src = "images/cards/" + finalSet[int].name + ".jpg";
    }
}

Thanks for the help. Dale

I had this problem too. What I found was that it took a while to cache the images, then it worked properly the second time after all the images had cached — H Bellamy, Nov 19 '11 at 17:49
Interesting. I think you nailed it. I wrote something that cached them all before running my test and they updated immediately. Thanks. So, can someone explain exactly what's going on there? Does the browser not retrieve those uncached images until the javascript call ends? I'd like to understand the details. — Dale, Nov 19 '11 at 17:59
Furthermore, is there a way to have the browser cache all of the images ahead of time? You guys had that answered before I asked it. Nice! — Dale, Nov 19 '11 at 18:01
You can preload them, but remember to mark my answer as accepted if you want. — H Bellamy, Nov 19 '11 at 18:02

gion_13 · Accepted Answer · 2011-11-19T17:56:10.927

The images are showing up only after they're loaded.
You might want to preload your images for an instant result.
Something like should do the trick :

function preloadImg(src,callback){
    var img = new Image();
    img.onload = callback;
    img.src = src;
}
function preloadImages(imgs,callback){
    var imagesToLoad = imgs.length;
    var _f = function(){
        if(imagesToLoad > 0) 
            return;
        callback();
    } 
    for(var i=0,l=imgs.length;i<l;i++)
        preloadImg(imgs[0],function(){
            imagesToLoad--;
            _f();
        });
}

preloadImages(yourImages,mainFunction);

H Bellamy · Answer 2 · 2011-12-27T17:54:06.850

1

I had this problem too. What I found was that it took a while to cache the images, then it worked properly the second time after all the images had cached

Hope this solves your problem.

edited Dec 27 '11 at 17:54

answered Nov 19 '11 at 17:50

H Bellamy

22,405
23
76
114

score 1 · Answer 3 · edited May 23 '17 at 11:43

You need to pre-load the images, before the change event is called.

You can do that like this, say when the page loads. Pretend you have them in an array.

var images = ["img1.jpg", "img2.jpg"]
var loadedImages = []
var img
for (var i = 0; i < images.length; i++) {
   img = new Image().src = images[i]
   loadedImages[i] = img // not sure if this is needed
}

You can also be fancy and check if the images are loaded using the load event. Some discussion of that can be found here: http://api.jquery.com/load-event/

Finally, you can probably use an image pre-loader script: Preloading images with jQuery

score -2 · Answer 4 · answered May 28 '14 at 15:44

-2

without javascript you can preload them putting them all in an hidden div (display:none) that you put somewhere after the thumbnails (so the browser will load the thumbnails first)

answered May 28 '14 at 15:44

Sly

361
2
9

My images aren't updating immediately upon changing their src in javascript

4 Answers4