Reload multiple images using Jquery ? How to optimize?

Question

I have a multi-image update using Jquery:

window.onload = function() {
    setInterval(function(){

        $( ".image" ).each(function( index ) {

            base_url = $(this).attr('src').split('?rand=')[0];
            address = base_url + '?rand=' + Math.random();
            $(this).attr("src", address);

        });

    },10000);

}; 

I’m trying to optimise her:

function update(){
    setInterval(function() {
        $(".cameragrid_").find("img").each(function(index) {
            d = new Date();
            var src = $(this)[0].src;
            var state = $(this).context.readyState;
            if(state == 'complete');{
                $(this).attr("src",src+d.getTime());
            }
        });
        console.log('click');
    }, 10000);
}


    $(window).ready(function(){
        $('.cameragrid_').hide();
    });

    $(window).load(function (){
        $('.cameragrid_').show();
        update();
    }
);

I wanted to reduce the time from 10 to 3 seconds, but when I decrease this time, I do not update all images, my algorithm to and the rest is not updated. .

Is there any way to optimize it to run within 3 seconds?

Answer 1

I ended up that way:

setInterval(function(){

                $( ".image" ).each(function( index ) {

                    var img = new Image();
                    img.src = $(this).attr('src');

                    console.log(img.complete);

                    if(img.complete){

                    console.log($(this).attr('src') + ' - done!');

                    base_url = $(this).attr('src').split('?rand=')[0];
                    address = base_url + '?rand=' + Math.random();
                    $(this).attr("src", address);

                    }

                });

            },500);