javascript - Chrome 和 Firefox 的 clientWidth 区别？

Question

我正在编写一个 JavaScript 函数，该函数会等待所有图像加载到网页上，然后修改它们的宽度以将它们放入框中。它在 Chrome 上的工作方式就像一个魅力(在加载图像之前 clientWidth 为 0)，但在 Firefox 上它会立即变成一些很小的数字(在我的例子中是 24 而不是 ~700)，因此实际的收缩部分发生在图像加载之前(所以它保持相同的尺寸)。有什么解决办法吗？

  function shrink() {
            var images = document.getElementsByTagName("img");
            var interval = setInterval(function() {
                var exit = 0;
                for (var i = 0; i < images.length; ++i) {
                    if (images[i].clientWidth != 0) exit += 1;
                }
                if(exit == images.length ) {
                    clearInterval(interval);
                    for (var i = 0; i < images.length; ++i) {
                        if(images[i].clientWidth > 600) images[i].style.width = 400;
                    }
                }
            },100);
        }

Answer 1

不要检查 clientWidth(这取决于是否显示替代文本或损坏的图像图标)，而是使用 images[i].complete 来确定是否图像正在加载。