Question

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

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

然而，这并不是持续发射。如果我进行硬刷新或关闭浏览器，但是正常刷新，或者只是在不擦除缓存的情况下两次点击相同的URL，则会触发.load()永远不会触发。

有关如何解决此问题的任何想法？

Answer 1

我认为这是has been discussed before。这不是缓存本身的问题，而是时间：图像可能已经在事件处理程序附加时加载（因此它永远不会被触发）。如果没有发生缓存，也可能发生这种情况，例如在非常快速的连接上的多线程浏览器中。幸运的是，您可以使用属性.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％的情况下，防止浏览器缓存图片是一个非常糟糕的主意，因为它会降低您的应用程序速度。相反，您应该检查图像是否已经加载，如果没有，则等待加载事件完成。

Answer 3

正如Ron和El Guapo所说，答案是在URL的末尾添加一个查询。我是这样做的：

$(this).find('img').each(function(){
   $(this).attr('src',$(this).attr('src')+'?'+new Date().getTime())  
}).load(function(){
   //This will always run now!

jQuery .load（）没有触发图像（可能是缓存？）

3 个答案: