Reload multiple images using jQuery? How to optimize?

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 ?

What exactly are you trying to do with this code? Are you trying to change the images every 3 seconds? Because if your images are taking longer than 3 seconds to load, that's never going to work. — Heretic Monkey, Mar 23 '16 at 21:59

score 1 · Answer 1 · answered Mar 23 '16 at 21:53

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.

quazardous · Accepted Answer · 2016-03-23T22:14:57.973

1

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

edited Mar 23 '16 at 22:14

answered Mar 23 '16 at 22:06

quazardous

846
10
15

How to add $.proxy() ? – Edson Cezar Mar 24 '16 at 13:32
$.proxy(function () { alert(); }, this) will return a function in this context, but I'm not sure it is mandatory for your case, was just a possibility – quazardous Mar 24 '16 at 14:33
Is there a way to verify if the reload of an image is complete ? I´m trying in this way: var state = $(this).context.readyState; if (state == 'complete'); { $(this).attr("src", src + d.getTime()); } – Edson Cezar Mar 24 '16 at 17:26
However the var state just return "undefined" – Edson Cezar Mar 24 '16 at 17:26
http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached check this link there is some good pointers – quazardous Mar 24 '16 at 17:30
you should update you're question to reflect you're current code – quazardous Mar 24 '16 at 17:31

Edson Cezar · Answer 3 · 2016-04-28T15:25:35.883

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

Reload multiple images using jQuery? How to optimize?

3 Answers3