加载我正在处理的 html 页面的一部分(使用 JQuery)涉及实例化几个 javascript 对象,每个对象都向页面添加图像。对象构造函数等待图像加载使用$(window).load()
获取它们的尺寸,并根据 cookie 值进行缩放。
页面加载后(再次使用$(window).load()
),主页面使用.hide()
;隐藏大部分图像。它们稍后会再次出现。
我遇到的问题是主页在 JS 对象可以获取它们的尺寸之前隐藏了图像。我需要主页等待所有对象在隐藏图像之前完成图像处理。
加载我正在处理的 html 页面的一部分(使用 JQuery)涉及实例化几个 javascript 对象,每个对象都向页面添加图像。对象构造函数等待图像加载使用$(window).load()
获取它们的尺寸,并根据 cookie 值进行缩放。
页面加载后(再次使用$(window).load()
),主页面使用.hide()
;隐藏大部分图像。它们稍后会再次出现。
我遇到的问题是主页在 JS 对象可以获取它们的尺寸之前隐藏了图像。我需要主页等待所有对象在隐藏图像之前完成图像处理。
不要将图像添加到页面并在加载后隐藏它们。
加载它们,测量它们的大小(参见jQuery:如何获取外部图像的尺寸?,图像加载时的 jQuery 回调(即使图像被缓存))并在需要时将它们添加到 DOM。
扩展@Bergi的回答:
通常所做的是将图像元素渲染到您想要它们的位置,但将它们替换src
为其他一些 1 像素虚拟图像并将真实源保存在其他地方(例如,在数据属性上):
<img src="/img/dummy.png" data-original-src="/img/path/to/real-image.png">
然后,一旦页面准备就绪(在它完全加载之前;使用 jQuery.ready),找到所有这些图像并使用原始源创建相应的外部图像。
对于每个这样的外部图像,一旦它被加载(使用 jQuery 的图像加载回调),你可以测量它和任何你想要的大小,然后最后src
用它的真实源替换原始图像,这将是即时的,因为浏览器已经加载此图片网址:
$('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
}
这导致图像在完全加载之前不会显示,并且您有机会缩放(或居中,或以其他方式预处理)它们。