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

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

我需要在页面创建时尽快发生…目前我用来将div #imageDiv设置为图像高度的#imageDiv发生得很慢，页面加载看起来很奇怪…

有什么建议？

Answer 1

正如评论中所提到的，这已经在这里得到了解答，尽管纯JavaScript不是JQuery。 我已经适应了这个答案：

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

这是function……

 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); }); 

小提琴 – 要查看完整效果，请确保图像不在缓存中（随机附加到图像源）。

Answer 2

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

还有一个JSFiddle演示 。