Question

我需要能够在图像完全加载到页面之前使用jQuery来获取图像#imageHero的高度。然后，我需要将div #imageDiv的高度设置为正在加载的#imageHero的高度。

我需要在创建页面时尽快实现...目前我用来将div #imageDiv设置为图像#imageDiv高度的代码正在缓慢地发生在页面上负载看起来很奇怪......

有什么建议吗？

Answer 1

正如评论中所提到的，虽然在纯JavaScript而不是JQuery中，但已经回答here。我已经适应了这个答案：

使用JQuery
使用静态图片
创建了一个可以调用的简单函数

这里的功能......

function getImageSize(img, callback){
    img = $(img);

    var wait = setInterval(function(){        
        var w = img.width(),
            h = img.height();

        if(w && h){
            done(w, h);
        }
    }, 0);

    var onLoad;
    img.on('load', onLoad = function(){
        done(img.width(), img.height());
    });


    var isDone = false;
    function done(){
        if(isDone){
            return;
        }
        isDone = true;

        clearInterval(wait);
        img.off('load', onLoad);

        callback.apply(this, arguments);
    }
}

您可以使用图像元素和接受宽度和高度参数的回调来调用该函数...

getImageSize($('#imageHero'), function(width, height){
    $('#imageDiv').height(height);
});

Fiddle - 要查看完整效果，请确保图片不在缓存中（随机附加到图像源）。

Answer 2

@Drahcir's答案的改进，此版本返回真正的高度，并有其他改进。用于测试图像源中的更改abc123到任意随机字符串以防止缓存。

还有一个JSFiddle Demo。

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>

在完全加载之前获取图像高度

2 个答案: