民间,
我是一名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页面:
答案 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