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

Question

民间，

我是一名UX / IA人，他在前端开发中的背景正在快速蒸发。我正在努力推出我的投资组合的新版本，并且遇到了jQuery的动态高度问题。

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

然而，英雄形象相当大，如果在慢速互联网连接上，布局渲染得太高，因为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 () { ... });块中运行前两行代码，而是尝试将它们移动到附加到文档就绪块内的图像的load事件处理程序中。这样，在获取图像并成功加载到DOM之后，计算就完成了。

尝试以下方法：

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

参考链接： .load()

Answer 2

尝试使用＆＃34; progressive＆＃34; JPEG。它应该更快地（接近立即）获得正确的大小，并且链接中的视频显示与其他格式相比它的效率。

（对于互联网上的几乎任何大图像都是如此）

http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html