画像が非常に多いレスポンシブ Web サイトを開発しています。議論のために、Pinterest のような画像のグリッドを想像してみてください。これらの画像の上に階層化されているのは、タイトル、作成者などの基本的なメタデータを含む div です。サムネイル画像で垂直方向に動的に中央揃えしています。
私は JavaScript を使用してその場で動的に計算しています (誰かがサイトにアクセスしているビューポートのサイズがわからないため、および/またはブラウザーのウィンドウのサイズを変更した場合)、サムネイル画像の高さを動的に計算し、メタデータの div を中心に配置していますそれ。
このアプローチは、1 つのことを除いてかなりうまく機能しているようですが、これが問題だと思います...? ページが最初にロードされると、メタデータを含む div が画像コンテナーの下部から始まり、画像の高さと画像の中心が JavaScript によって決定された後に上に移動します。実際、UX の観点からは、この「ヒックアップ」が発生するのを見るのはあまり良くないように見えます。画像のサムネイルの高さが計算された後にのみ、メタ 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 (ミックスインや変数が表示される場合に備えて、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);