0

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

给定一个设置为溢出：自动的 div，它将（可能）包含一个大于其窗口的图像，我试图找出一种方法来等待该图像在查询其属性之前加载。我追求的属性是它的内部宽度，减去它的滚动条。感谢之前的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();
4

2 回答 2

1

把你想做的一切都放进去

$("img").load(function(){...});
于 2012-05-22T01:26:56.603 回答
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。加载发生后，因为它是一个图像对象，你不需要将它添加到页面来获取它的高度和宽度，这些属性是内置的。

于 2012-05-22T01:44:24.510 回答