Question

我使用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);
};

我试图改进它：

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

我想将时间从10秒减少到3秒，但是当我缩短这段时间时，不要更新所有图像，我的算法和其他图像都不会更新。

有没有办法优化它在3秒内运行？

Answer 1

嘿，你有没有试过https://tinypng.com/这个压缩图像格式，这会增加一些图像的加载时间，你也可以将10个图像的精灵变为1，这样只加载一个文件然后索引精灵。

从未亲自尝试过image-min，但这也值得一看。

相信精灵可以解决你的问题。

Answer 2

而不是为许多图像设置一个计时器，你可以尝试使用多个计时器，每个图像一个或至少一小批图像。

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

};

我没有测试过这段代码，但是你可以得到这个想法，也许你必须在某处添加一个$ .proxy（）来修复这个上下文。

测试是否显示图像应该更容易：https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

Answer 3

我这样结束了：

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

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

3 个答案: