1

似乎由于某种原因该.load方法不起作用。在我的jQuery中：

$(document).ready(function() {
    var imgHeight;
    $('body').prepend('<img src="http://farm9.staticflickr.com/8266/8653931785_4a8d43164f.jpg" class="select" />');
    if($('img.select').prop('complete')) {
       imgHeight = $('img.select').outerHeight();
    }else{
        $('img.select').load(function() {
            imgHeight = $('img.select').outerHeight();
        });    
    }
    $('body').prepend('<p>Image Height: ' + imgHeight + '</p>');
});

和一个jsfiddle的链接

示例运行几次后（我假设图像已缓存），它将成功检索正确的高度。这告诉我if($('img.select').prop('complete'))工作正常。

我在这里想念什么？

（在 Chrome 和 FF 中测试）

编辑：好的，现在如果我想检查多个图像（如果它们已加载）怎么办？ $('img.select').prop('complete')仅测试与选择器匹配的第一个元素。 http://jsfiddle.net/hcarleton/2Dx5t/6/

4

2 回答 2

2

编辑更新为使用one()而不是弃用load()

load()是异步的，因此不会imgHeight在调用$('body').prepend('<p>Image Height: ' + imgHeight + '</p>');. 从 jQuery 1.8 开始，load()事件处理函数也被弃用了。

最好将委托的负载侦听器附加到具有.select该类的任何图像的主体上。在该事件处理程序的回调中，您可以检测图像高度。

$(document).ready(function() {
    $('body').one('load', 'img.select', function(e) {
        var imgHeight = $('img.select').outerHeight();
        $('body').prepend('<p>Image Height: ' + imgHeight + '</p>');
    });    

    $('body').prepend('<img src="http://farm9.staticflickr.com/8266/8653931785_4a8d43164f.jpg" class="select" />');
});
于 2013-04-17T14:00:45.543 回答
1

改用这个：

看演示

$(document).ready(function () {
    var imgHeight;
    $('body').prepend('<img src="http://farm9.staticflickr.com/8266/8653931785_4a8d43164f.jpg" class="select" />');
    $("img").one('load', function () {
        imgHeight = $(this).outerHeight();
        $('body').prepend('<p>Image Height: ' + imgHeight + '</p>');
    }).each(function () {
        if (this.complete) $(this).load();
    });

});
于 2013-04-17T13:59:27.760 回答