[英]How to execute JavaScript code after dynamic image height is calculated?
我正在开发一个非常形象的响应式网站。 想象一下像Pinterest这样的图像网格,以进行辩论。 这些图像之上是div,其中包含基本元数据(例如标题,作者等),我将它们动态动态地垂直放置在缩略图中。
我正在使用JavaScript进行动态动态计算(因为我不知道某人正在访问该网站的视区大小和/或他们是否调整浏览器寡妇的大小)缩略图的高度并将元数据的div居中它。
除了一件事,这种方法似乎效果很好,我怀疑这是问题所在...? 当页面最初加载时,包含元数据的div从图像容器的底部开始,然后在图像高度和图像中心由JavaScript确定后向上移动。 实际上,从UX的角度来看,观看这种“启动”看起来并不那么好。 我想我需要实现某种回调函数或延迟,以便仅在计算图像缩略图高度后才应用应用于meta div的CSS。
以下是我的HTML,CSS和JavaScript的摘要,以帮助您了解我的代码的状况。 如果您需要进一步澄清任何部分,请告诉我:
的HTML
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<div class='meta'>
<p class='title'><?php get_the_title(); ?></p>
<p class='author'><?php get_the_author(); ?></p>
</div>
<?php the_post_thumbnail('main'); ?>
</a>
</article>
CSS(如果您看到任何mixin或变量,我会使用LESS)
article {
width: 100%*(390/1174);
display: inline-block;
position: relative;
z-index: 900;
.meta {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 500;
font-size: 20px;
line-height: 1em;
text-align: center;
.title {
margin: 0;
padding: 0 16px 8px 16px;
font-size: 1em;
line-height: 1.15em;
font-weight: 700;
}
.author {
.proxima-nova;
color: white;
margin: 0;
font-size: .70em;
line-height: .825em;
}
}
a { display: block; }
}
的JavaScript
var article = $('article'),
meta = $('.meta'),
meta_height = meta.height(),
article_height = article.height(),
meta_center = .5 * meta_height,
article_center = .5 * article_height,
center = (article_center - meta_center);
meta.css('bottom', center);
setTimeout(function() {
meta.show();
}, 500);
您正在使用php来获取图像..您可以使用jQuery.ajax()
从图像服务器异步获取图像,然后在此示例中使用像done()
这样的ajax()
回调方法:
$.ajax({
url: "http://yourImageServer/image.png"
}).done(function ( data ) {
// your callback method here
});
在那里,您可以插入已知图像高度和宽度等的元信息。与此同时,您可以使用微调器预加载这些div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.