0

私はギャラリー タイプのアプリケーションに取り組んでいます。1 つのテンプレートでは、クリックするとサムネイル画像が大きく表示されるポップアップ ダイアログが表示されます。イメージへのサーバー パスは、テンプレート変数として含まれています。

Gallery.Templates.Popup = "\
    <div class='popup'>\
        <img class='popup-image' src='{{image-path}}' />\
        <div class='name'>{{name}}</div>\
        <div class='caption'>{{caption}}</div>\
        <div class='dimensions'>{{dimensions}}</div>\
        <div class='price'>{{price}}</div>\
    </div> \
";

これは、イメージが初めて読み込まれる場合を除いて、非常にうまく機能します。ダイアログが作成されて表示されますが、html 文字列が dom にアタッチされた時点で画像が表示されません。それが引き起こしている問題は、ダイアログの配置にあります。

ダイアログ ボックスは、次のように画面の中央に配置されます。 left = window.width /2 - dialog.width/2

しかし、画像が存在しないため、dialog.width 変数が正しくありません。繰り返しますが、これはサムネイルが最初にクリックされたときにのみ発生します。その後のクリックのために画像がキャッシュされていると思います。

これは、何らかの形で画像をプリフェッチすることで処理されますか? もしそうなら、キャッシュするためにDOMにアタッチする必要がありますか、それとも配列にロードするだけですか?

どうもありがとう ！

4

1 に答える 1

0

サーバーから事前に画像サイズを取得できる場合は、それを使用して「.popup」div のサイズを適切に設定できます。

画像が必要ない場合に画像をプリフェッチするのは悪い考えのように思えます.HTMLがプログラムで生成される前に特定の画像が確実に読み込まれるようにする方法は考えられません.

于 2012-05-05T01:26:03.997 に答える