如何在使用 jQuery 查询之前等待图像加载

Question

示例：http://jsfiddle.net/forgetcolor/rZSCg/3/

假设 div 设置为 overflow:auto，它（可能）包含一个大于其窗口的图像，我试图找出一种方法来等待该图像加载，然后再查询其属性。我追求的属性是它的内部宽度，减去它的滚动条。感谢以前的stackoverflow问题（http://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar）我有一种技术可以做到这一点，但这仅适用于小图像或缓存中的图像。当它获得一个大图像时，执行查询的代码会在图像加载完成之前执行。

我想要的是一种在执行查询之前等待该图像加载的方法。有什么想法吗？

完整示例：http://jsfiddle.net/forgetcolor/rZSCg/3/

Javascript：

// using a random appended to the URL to simulate non-cached
// varying images
var r = Math.floor((Math.random()*100000)+1);
$('#box1').html("<img src='http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?"+r+"' />");
var helperDiv = $('<div />');
$('#box1').append(helperDiv);
$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();

Answer 1

   var r = Math.floor((Math.random()*100000)+1);
   var newImage = new Image()
   $(newImage).load(function(){
        $('#iw').text("inner width is: " + newImage.width);
   });
   newImage.src = 'http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?'+r

您遇到的问题有点复杂。来自 DOM 的图像具有奇怪的加载行为，其中 onload 事件并不总是触发。因此，将图像放入 div 然后等待 DOM 元素触发 onload 是行不通的。

因此，我们需要内置的 javascript 图像对象。 （最近了解到）这个对象将解决您的两个问题。首先，只要在设置图像源之前设置 .load 侦听器，它就会在每个浏览器中每次触发 onload。加载发生后，因为它是一个图像对象，你不需要将它添加到页面中来获取它的高度和宽度，这些属性是内置的。

Answer 2

把你想做的都放进去

$("img").load(function(){...});