计算动态图像高度后如何执行JavaScript代码

How to execute JavaScript code after dynamic image height is calculated?

本文关键字：执行 JavaScript 代码 何执行 图像 动态 高度 计算      更新时间：2023-09-26

我正在开发一个响应式网站，这是非常重的图像。为了论证起见，想象一个像Pinterest这样的图像网格。分层在这些图像的顶部是div包含基本元数据，如标题，作者等，我在缩略图图像动态垂直居中。

我使用JavaScript动态计算在飞行(因为我不知道什么视口大小的人正在访问的网站和/或如果他们调整他们的浏览器寡妇)的缩略图图像的高度和中心的元数据在它的div。

这种方法似乎工作得很好，除了一件事，我怀疑这是问题…?当页面初始加载时，包含元数据的div从图像容器的底部开始，然后在JavaScript确定图像高度和图像中心后向上移动。实际上，从用户体验的角度来看，看到这种"挂起"发生看起来并不是很好。我想我需要实现某种回调函数或延迟，以便应用于元div的CSS仅在计算图像缩略图高度后才应用。

下面是我的HTML, CSS和JavaScript的片段，以帮助您理解我的代码是怎么回事。如果您需要进一步的说明，请告诉我:

<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(我使用LESS以防你看到任何mixins或变量)

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()从图像服务器异步获取图像，然后使用ajax()回调方法，如本例中的done():

$.ajax({
  url: "http://yourImageServer/image.png"
}).done(function ( data ) {
   // your callback method here
});

在那里你可以插入你的元信息已经知道图像的高度和宽度等。与此同时，你可以用旋转器预加载这些div

相关文章：