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

将您想要做的所有事情都放在

中

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

Answer 2

   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侦听器，它就会在每次浏览器中每次触发。在加载发生后，由于它是一个图像对象，您不需要将它添加到页面以获得它的高度和宽度，这些属性是内置的。

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

2 个答案: