在完全加载之前获取图像高度 [英] Get Image height before its fully loaded

问题描述

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

I need to be able to use jQuery to get the height of an image #imageHero before it has fully loaded into the page. I then need to set the height of a div #imageDiv to be the height of the #imageHero which is being loaded.

我需要在创建页面时尽快发生这种情况...目前，我用于将div #imageDiv设置为图像#imageDiv高度的代码正在缓慢进行，页面加载看起来很奇怪. ..

I need this to happen ASAP when the page is created... currently the code I am using to set the div #imageDiv to the height of the image #imageDiv is happening to slowly and the page load looks odd...

有什么建议吗?

推荐答案

如评论中所述，这已经得到了解答

As mentioned in the comments, this has already been answered here, although in pure JavaScript not JQuery. I have adapted that answer to:

• 使用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);
    }
}

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

You can call the function with an image element, and a callback accepting width and height arguments...

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

小提琴 -要查看完整效果，请确保图像不在您的缓存中(随机添加到图像源).

Fiddle - To see the full effect make sure the image is not in your cache (append a random to the image source).

这篇关于在完全加载之前获取图像高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！