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

【问题标题】：Slow loading image causing problems with jQuery height variable加载缓慢的图像导致 jQuery 高度变量出现问题
【发布时间】：2014-05-17 09:29:36
【问题描述】：

伙计们，

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

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

然而，主图相当大，如果网络连接速度较慢，布局渲染太高，因为 jquery.functions.js 文件在主图加载完成之前加载，导致 jquery 设置div 的高度到图像的 full 高度，而不是其显示的高度。

我该如何解决这个问题？

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>

jQuery：

$(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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

尝试以下方法：

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

参考链接：.load()

【讨论】：

假设我的目标是$('#hero-asset img')，这让我大部分时间都到达了那里，但是，现在我加载的页面大小有一个小间隙，当我调整视口大小时它会自行修复（由于我的$(window).resize(function () { ... }) 函数。）您现在可以在同一页面上看到它：test.willphillips.org/project.html

【解决方案2】：

尝试使用“渐进式”JPEG。它应该更快（几乎立即）获得正确的尺寸，并且链接中的视频显示了与其他格式相比它的效果。

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

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

【讨论】：