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

Answer 1

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);