jQuery .load()没有触发图像(可能是缓存？)

Question

我有一些非常基本的jQuery代码:

...
$(this).find('img').load(function(){
   loadedImages++;
   if(loadedImages == $this.find('img').length){
...

然而,那不是持续发射.如果我进行硬刷新或关闭我的浏览器,它会触发,但是正常刷新,或者只是在不擦除缓存的情况下两次点击相同的URL会使得.load()从不激活.

有想法该怎么解决这个吗？

Answer 1

我认为这已经讨论过了.这不是缓存本身的问题,而是时间:图像可能已经在事件处理程序附加时加载(因此它永远不会被触发).如果没有发生缓存,也可能发生这种情况,例如在非常快速的连接上的多线程浏览器中.幸运的是.complete,您可以使用以下属性:

var load_handler = function() {
    loadedImages++;
    …
}
$(this).find('img').filter(function() {
    return this.complete;
}).each(load_handler).end().load(load_handler);

您还可以创建自己的事件附加功能:

jQuery.fn.extend({
    ensureLoad: function(handler) {
        return this.each(function() {
            if(this.complete) {
                handler.call(this);
            } else {
                $(this).load(handler);
            }
        });
    }
});

然后将其命名如下:

$(this).find('img').ensureLoad(function(){
    loadedImages++;
    if(loadedImages == $this.find('img').length){
    …
});

Answer 2

一种方法是在用于抓取图像的 URL 末尾添加一个“虚拟变量”...例如作为查询字符串参数附加的时间（以毫秒为单位）。

编辑：在 99% 的情况下，阻止浏览器缓存图像是一个非常糟糕的主意，因为它会减慢您的应用程序的速度。相反，您应该检查图像是否已加载，如果没有则等待加载事件完成。