0

画像が非常に多いレスポンシブ 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);
4

1 に答える 1

0

php を使用jQuery.ajax()して画像を取得しています。画像サーバーから非同期的に画像を取得するために使用できます。次に、次の例のajax()ようにコールバック メソッドを使用します。done()

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

そこでは、画像の高さや幅などを知っているメタ情報を挿入できます。その間、スピナーを使用してこれらの div を事前に読み込むことができます。

于 2013-03-12T16:54:48.500 に答える