在图像完全加载之前执行JS / jQ

Question

我有以下代码，它计算水平图库中一组图像的宽度并将其应用于div，以便它们都适合：

jQuery(window).load(function() {
var totalwidth=0;

jQuery('#gallery img').each(function(){
totalwidth+= jQuery(this).width() + 15;
});

jQuery('#gallery').width(totalwidth+100);
});

问题是，在包含100张图像的图库中，在加载所有图像之前，没有图像可见。我不知道如何解决这个问题，我希望图像能够像其他任何网站一样一个接一个地加载。

是否可以不计算所有图像的宽度，然后将该宽度应用于div并加载图像以便用户可以开始浏览它们？或者是否需要完全加载图像以获得宽度？

由于

Answer 1

浏览器知道图像的大小，当它被加载时 您可以将它们放在隐藏的div中，计算尺寸然后一个接一个地显示它们。也许这对你有用。

Answer 2

如果没有关于你的html元素的更多信息以及你想要实现的目标，很难给出更多的建议，但这是第一次尝试：

Javascript是客户端脚本，基本上如果您的浏览器没有这些信息，javascript则没有。所以，为了解决这个问题，你最初可以隐藏图像或它们的容器，并且在你的循环中逐个显示它们，因为函数在每个图像上执行 - 这样计算在图像显示之前完成，但用户感觉就像他们得到的一样更快速的回应。