使用setTimeout重新加载图像

Question

当我加载图像并且加载失败时，我尝试使用setTimeout延迟一段时间后重新加载，如下所示：

$('img').error(function(){
    setTimeout(function(){
        $(this).attr('src', $(this).attr('src') + '?' + Math.random());
    }, 3000);
});

但是此解决方案无法按预期重新加载图像。

Answer 1

this不再是指$（“IMG”），你需要一个varialbe指派为占位符， this

$('img').error(function(){
    var $self = $(this);
    setTimeout(function(){
    $self.attr('src', $self.attr('src')+'?'+Math.random());
    }, 3000);
});

Answer 2

值this变为window在你内心的功能范围。 当外部函数被触发时，保存对image的jQuery包装的引用。

$('img').error(function() {
    var $img = $(this);
    setTimeout(function(){
        $img.attr('src', $img.attr('src') + '?' + Math.random());
    }, 3000);
});

---

编辑：
正如@epascarello指出的那样，您假设追加?randomNum时，图像上没有任何现有查询参数。 如果您知道总是这样，那很好，尽管参数确实应该是?key=randomNum 。 如果可能存在现有参数，则必须执行以下类似操作。 （ 但是您是否真的需要在URL后面附加一个随机数？ ）。

function updatedSrc(oldSrc) {
    var delim = (oldSrc.indexOf('?') != -1) ? '&' : '?';
    return oldSrc + delim + "rand=" + Math.random();
}

当您更新src您将执行$img.attr('src', updatedSrc($img.attr('src'))) 。