Javascript 加载图像速度慢导致jQuery高度变量出现问题

各位

我是一个UX/IA的家伙，在前端开发中的背景正在迅速消失。我正在着手发布我的公文包的新版本，并在jQuery中遇到了动态高度问题

我有一个英雄形象的流动布局。因此，该图像的高度会发生变化。我有两个同级div，我使用jQuery动态设置其高度

但是，英雄图像相当大，如果在缓慢的internet连接上，布局渲染得太高，因为jquery.functions.js文件在英雄图像加载完成之前加载，导致jquery将div的高度设置为图像的完整高度，而不是其显示高度

我怎样才能避开这件事

jquery是否仅在加载英雄图像后加载？是否有一个函数用于在加载映像后运行jquery

HTML:

<section id="hero">
    <div id="border-top">
        <div class="corner tl"></div>
        <div class="corner tr"></div>
        <div class="center"></div>
    </div>  
    <div class="border"><div class="content">
        <h3>Updating and Improving Checkout</h3>            
        <h1>Tarot.com eCommerce Update</h1>
    </div></div><!-- /border /content -->
    <div id="border-bottom-casestudy">
        <div class="corner bl"></div>
        <div class="corner br"></div>
        <div id="hero-asset">
            <img src="img/img-work-tarotecom-hero.png" />
        </div>
        <div class="clearing"></div>
    </div>
</section>  

有问题的在制品页面：

<section id="hero">
    <div id="border-top">
        <div class="corner tl"></div>
        <div class="corner tr"></div>
        <div class="center"></div>
    </div>  
    <div class="border"><div class="content">
        <h3>Updating and Improving Checkout</h3>            
        <h1>Tarot.com eCommerce Update</h1>
    </div></div><!-- /border /content -->
    <div id="border-bottom-casestudy">
        <div class="corner bl"></div>
        <div class="corner br"></div>
        <div id="hero-asset">
            <img src="img/img-work-tarotecom-hero.png" />
        </div>
        <div class="clearing"></div>
    </div>
</section>  

---

而不是在

$（文档）.ready（函数（）{…}）中运行前两行代码块，尝试将它们移动到附加到document ready块内图像的
load
事件处理程序中。这样，在成功获取图像并将其加载到DOM中后，计算就完成了

请尝试以下操作：

$(document).ready(function () {
    $('#hero-asset img').load(function () {
        $('#border-bottom-casestudy .corner').height($(this).height());
    });
});

参考链接：
尝试使用“渐进式”JPEG。它应该很快（接近立即）获得正确的大小，链接中的视频显示了它与其他格式相比的效果

（互联网上几乎所有大型图像都是如此）

这让我大部分时间都在那里，假设我的目标是
$（“#hero asset img”）
，但是，现在我在加载页面时，在大小上有一个小间隙，当我调整视口大小时，这个间隙会自行修复（由于我的
$（窗口）。调整大小（函数（）{…}）
函数）。您现在可以在同一页面上看到它：