Question

加载我正在处理的html页面（使用JQuery）的一部分涉及实例化几个javascript对象，每个对象都向页面添加一个图像。对象构造函数等待使用$(window).load()加载图像获取其尺寸，并根据cookie值进行缩放。

加载页面后（再次使用$(window).load()），主页面会使用.hide()隐藏大部分图片;他们会在以后重新出现。

我遇到的问题是主页在JS对象获取其尺寸之前隐藏了图像。我需要主页面等待所有对象在隐藏图像之前完成图像处理。

Answer 1

不要将图像添加到页面中，并在加载后隐藏它们。

加载它们，测量它们的大小（请参阅jQuery: how to get the dimensions of a external image?，jQuery callback on image load (even when the image is cached)），并在需要时将它们添加到DOM中。

Answer 2

扩展@ Bergi的回答：

通常做的是将图像元素渲染到您想要的位置，但将其src替换为其他1像素虚拟图像，并将实际源保存在其他位置（例如，在数据属性上）：< / p>

<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
}

这导致图像在完全加载之前不会显示，并且您有机会缩放（或居中或以其他方式预处理）它们。

同步javascript调用

2 个答案: