Question

我想在加载后重新加载图像。这是我的代码：

$(function () {
    function reload() {
        console.log('Inside reload');
        var srcImage = 'http://cam2.camvine.com/axis-cgi/jpg/image.cgi?resolution=320x240' + '&d=' + (new Date()).getTime();

        $('img')
            .attr('src', srcImage)
            .load(function () {
                setTimeout(reload, 500);
            })
            .error(function () {
                setTimeout(reload, 1000);
            });
    }

    reload();
});

出于某种原因，load事件每秒被调用数十次，最终冻结了我的浏览器。 Here是一个小提琴。我做错了什么？

Answer 1

问题是你在每次迭代时都会在元素中添加另一个“load”处理程序。因此，每个“load”事件都将导致所有被调用的处理程序。他们会添加更多处理程序，过了一会儿就会有很多。

你可以取消绑定处理程序，或者只是离开它并以某种方式检查它的存在：

function reload() {
    console.log('Inside reload');
    var srcImage = 'http://cam2.camvine.com/axis-cgi/jpg/image.cgi?resolution=320x240' + '&d=' + (new Date()).getTime();

    var $img = $('img');
    $img
        .attr('src', srcImage);

    if (!$img.hasClass('load-ready'))
      $img
        .addClass('load-ready')
        .load(function () {
            setTimeout(reload, 500);
        })
        .error(function () {
            setTimeout(reload, 1000);
        });
}

Here is your jsfiddle, updated.

Answer 2

每个reload您都要为现有的加载事件处理程序添加一个新的加载事件处理程序。

$(function () {
    function reload(first_run) {
        console.log('Inside reload');
        var srcImage = 'http://cam2.camvine.com/axis-cgi/jpg/image.cgi?resolution=320x240&d=' + (+new Date()),
            img = $('img');

        if (first_run === true) {
            img.load(function() {
                setTimeout(reload, 500);
            });   
        }
        img.attr('src', srcImage);
    }

    reload(true);
});

加载事件经常被称为方式

2 个答案: