我正在编写一个 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);
}
最佳答案
不要检查 clientWidth
(这取决于是否显示替代文本或损坏的图像图标),而是使用 images[i].complete
来确定是否图像正在加载。
关于javascript - Chrome 和 Firefox 的 clientWidth 区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8611009/