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

Slow loading image causing problems with jQuery height variable

本文关键字：变量 问题 高度 jQuery 图像 缓慢 导致 加载      更新时间：2023-09-26

Folks，

我是一个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);
});

有问题的在制品页面：

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

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

尝试以下操作：

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

参考链接：.load()

尝试使用"渐进式"JPEG。它应该更快(几乎立即(获得正确的大小，链接中的视频显示了与其他格式相比它的有效性。

(互联网上几乎所有的大图像也是如此(

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

相关文章：