javascript - 加载图像缓慢导致 jQuery 高度变量出现问题

Question

各位，

我是一名 UX/IA 人员，其前端开发背景正在迅速消失。我正在努力发布我的投资组合的新版本，但遇到了 jQuery 的动态高度问题。

我有一个带有主图的流畅布局。该图像的高度因此发生变化。我有两个同级 div，我使用 jQuery 动态设置它们的高度。

然而，主图相当大，如果互联网连接速度较慢，布局会呈现得过高，因为 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>  

ThejQuery:

$(document).ready(function() {
    var image_height = $('#hero-asset').height();
    $('#border-bottom-casestudy .corner').height(image_height);
});

$(window).resize(function () {
    var image_height = $('#hero-asset').height();
    $('#border-bottom-casestudy .corner').height(image_height);
});

有问题的 WIP 页面:

http://test.willphillips.org/project.html

Answer 1

与其在 $(document).ready(function () { ... }); block 中运行前两行代码，不如尝试将它们移动到 load 附加到文档就绪 block 内图像的事件处理程序。这样，在获取图片并成功加载到DOM中后，计算就完成了。

尝试以下操作:

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

引用链接: .load()