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

时间:2014-05-16 18:49:11

标签: javascript jquery html css

民间,

我是一名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

2 个答案:

答案 0 :(得分:2)

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

尝试以下方法:

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

参考链接: .load()

答案 1 :(得分:0)

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

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

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