这是为什么；“正在加载消息”；脚本不能在FF中工作？（javascript）

我有这个脚本，它应该显示文本“加载…”当图像加载，然后改变文本为“加载”时，所有图像加载。我添加了一个按钮来加载新图像，以确保它也适用于动态加载的图像

这在Chrome中非常有效，但在Firefox中，“加载…”文本从未出现。我不知道为什么会这样。页面开始加载，但并非所有图像都已加载，因此它应该创建文本“加载…”，但它没有。然后，当所有图像加载完毕后，文本“加载”出现

我只是不明白为什么一条消息会出现而另一条不会出现。特别是因为在创建“加载…”文本之前不需要满足任何条件，所以它应该自动启动

|

从

与图像一起使用时加载事件的注意事项 开发人员使用`.load（）`快捷方式试图解决的一个常见问题是，在图像（或图像集合）完全加载后执行一个函数。有几个已知的注意事项需要注意。这些是：

• 它在跨浏览器中无法稳定工作，也不可靠
• 如果图像src设置为与以前相同的src，则在WebKit中无法正确触发
• 它不能正确地在DOM树上冒泡
• 对于已经存在于浏览器缓存中的图像，可以停止激发

---

代码中有几个问题

首先，

checkComplete（）

函数编写不正确。应该是这样的：

var checkComplete = function() {
    var imgs = $('img');
    if(imgs.filter(function() {return this.complete;}).length == imgs.length) {
        $('.status').text('Loaded');
    } else {
        $('.status').text('Loading...');
    }
};

这里的主要修复方法是，筛选器回调需要引用

this.complete

，而不是

$（'img'）.prop（'complete'）

，因为您试图一次筛选单个项

其次，在更改

.src

值后，您依赖于

.complete

和

.load

正常工作。这显然是它们不能在所有浏览器中正常工作的情况之一

解决此问题的可靠方法是为新图像创建一个新图像对象，在设置

.src

值之前设置onload处理程序，当两个onload处理程序都启动时，您将知道两个新图像都已加载，并且可以用新图像替换DOM中的图像

以下是一个在FF中工作的版本：

$(document).ready(function() {

    $('#button').click(function() {
        var imgA = new Image();
        var imgB = new Image();
        imgA.className = "a";
        imgB.className = "b";
        var loaded = 0;
        imgA.onload = imgB.onload = function() {
            ++loaded;
            if (loaded == 2) {
                $("img.a").replaceWith(imgA);
                $("img.b").replaceWith(imgB);
                $('.status').text('Loaded');
            }
        }
        // the part with adding now to the end of the URL here is just for testing purposes to break the cache
        // remove that part for deployment
        var now = new Date().getTime();
        imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
        imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
        $('.status').text('Loading...');
    });
});

工作演示：

---

如果要保留原始对象，可以仅将新创建的对象用于预加载新图像，然后在预加载后更改.src，如下所示：

$(document).ready(function() {

    $('#button').click(function() {
        var imgA = new Image();
        var imgB = new Image();
        var loaded = 0;
        imgA.onload = imgB.onload = function() {
            ++loaded;
            if (loaded == 2) {
                $("img.a")[0].src = imgA.src;
                $("img.b")[0].src = imgB.src;
                $('.status').text('Loaded');
            }
        }
        // the part with adding now to the end of the URL here is just for testing purposes to break the cache
        // remove that part for deployment
        var now = new Date().getTime();
        imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
        imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
        $('.status').text('Loading...');
    });
});

---

此版本的工作演示：

您是否意识到，一旦图像进入浏览器缓存，您可能永远不会看到加载…提示，因为它们都将快速加载。@jfriend00（第一条评论）是的，我知道这一点，并且在缓存中没有图像的情况下对其进行了测试。我还使用了非常大的图像文件，所以我可以看到它们正在加载。在他们加载之前，它应该显示消息“正在加载…”，但事实并非如此。我不知道为什么。我会让计时器每隔X毫秒执行一次

checkComplete（）

（优化版本为@jfriend00 second comments为true），并在加载所有图像时停止。

.load（）

事件对于图像来说不够可靠。@jfriend00（第二条注释）您能解释一下吗？刚才注意到所有这些都可能是错误造成的。筛选函数应该是

return$（this.prop（'complete'）；}

在当前代码中，仅当第一个映像完成时才进行检查。我知道浏览器缓存警告，但不知道“它在跨浏览器时不一致也不可靠”。如果是这种情况，您应该如何测试是否已加载所有图像？感谢您的回复。因此，尝试以这种方式检查所有图像的

complete

属性是徒劳的，我应该按照设置的间隔进行检查？（编辑后）好的，我将尝试创建新的图像对象，而不是仅仅更改

src

属性。我这样做的原因是我想保留当前图像对象上设置的所有类，以及一些-data-properties。@moss-我在答案中添加了一个版本的代码和一个工作JSFIDLE，用于生成新的图像元素。它在Firefox中工作。@moss-您可以等待图像加载到新创建的对象上，然后在原始对象上设置

.src

。这将允许您保留原始对象的原始属性，但在加载时使用新对象进行检测。@moss-我在回答中添加了一个保留原始对象的版本。

$(document).ready(function() {

    $('#button').click(function() {
        var imgA = new Image();
        var imgB = new Image();
        var loaded = 0;
        imgA.onload = imgB.onload = function() {
            ++loaded;
            if (loaded == 2) {
                $("img.a")[0].src = imgA.src;
                $("img.b")[0].src = imgB.src;
                $('.status').text('Loaded');
            }
        }
        // the part with adding now to the end of the URL here is just for testing purposes to break the cache
        // remove that part for deployment
        var now = new Date().getTime();
        imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
        imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
        $('.status').text('Loading...');
    });
});