加载我正在处理的 html 页面的一部分（使用 JQuery）涉及实例化几个 javascript 对象，每个对象都会向页面添加一个图像。对象构造函数等待图像加载，使用$(window).load() 获取它们的尺寸，并根据 cookie 值进行缩放。
一旦页面被加载（同样，使用$(window).load()），主页面使用.hide()隐藏大部分图像；它们稍后会再次出现。
我遇到的问题是主页在 JS 对象可以获取它们的尺寸之前隐藏了图像。在隐藏图像之前，我需要主页等待所有对象完成图像处理。
【问题讨论】：
hide，而不是依赖$(window).load()。
标签： javascript jquery html
不要将图像添加到页面并在加载后隐藏它们。
加载它们，测量它们的大小（参见jQuery: how to get the dimensions of a external image?、jQuery callback on image load (even when the image is cached)）并在需要时将它们添加到 DOM。
【讨论】：
扩展@Bergi 的回答：
通常所做的是将图像元素渲染到您想要它们的位置，但将它们的 src 替换为其他一些 1 像素的虚拟图像并将真实源保存在其他位置（例如，在数据属性上）：
<img src="/img/dummy.png" data-original-src="/img/path/to/real-image.png">
然后，一旦页面准备就绪（在完全加载之前；使用 jQuery.ready），找到所有这些图像并使用原始来源创建相应的外部图像。
对于每个这样的外部图像，一旦它被加载（使用 jQuery 的image load callback），你可以measure it 和任何你想要的大小，然后最后用它的真实来源替换原始图像的src，这将是即时的，因为浏览器已经加载了这个图片 URL：
$('img').each(function() {
var originalImg = $(this);
var externalImg = $('<img>').attr('src', originalImg.data('original-src'));
externalImg.load(function() {
// measure, scale, center, and pre-process as you wish
originalImg.attr('src', externalImg.attr('src'));
originalImg.data('original-src', null);
}); // you'll also have to use .complete() here, see links for details
}
这会导致图像在完全加载并且您有机会缩放（或居中，或以其他方式预处理）它们之前不会显示。
【讨论】：