使用jQuery重新加载多个图像？ 如何优化？

Question

I have an update of multiple images 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 improve it:

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 reduce this time, do not update all the images, my algorithm and the rest is not updated. .

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

Answer 1

Hey have you tried https://tinypng.com/ this compress the image format, this will increase some loading time of image more over you can also work on making the sprite of 10 images into 1 in this way loading only one file and then indexing the sprite.

Never personally tried image-min but this is also worth looking.

Believe sprite could solve your problem in shot.

Answer 2

instead of having one timer for many images maybe you could try to have many timers, one for each image or at least a small batch of images.

window.onload = function () {

    $(".image").each(function (index) {
        setInterval(function () {
             base_url = $(this).attr('src').split('?rand=')[0];
             address = base_url + '?rand=' + Math.random();
             $(this).attr("src", address);
        }, 3000);
    });

};

I've not tested this code but you can get the idea, maybe you'll have to add a $.proxy() somewhere to fix the this context.

testing if the image is displayed should be easier this way: https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

Answer 3

I ended that way:

setInterval(function(){

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

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

                    if(img.complete){

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

                    }

                });

            },500);