1

私が (JQuery を使用して) 作業している html ページをロードする際には、いくつかの JavaScript オブジェクトをインスタンス化する必要があり、それぞれがページに画像を追加します。オブジェクト コンストラクター$(window).load()は、サイズを取得して画像が読み込まれるのを待ち、Cookie の値に基づいてスケーリングします。

ページが読み込まれると (再び を使用$(window).load())、メイン ページは を使用してほとんどの画像を非表示にし.hide()ます。彼らは後で再び現れます。

私が抱えている問題は、JS オブジェクトがサイズを取得する前に、メイン ページが画像を非表示にすることです。画像を非表示にする前に、すべてのオブジェクトが画像操作を完了するのを待つメイン ページが必要です。

4

2 に答える 2

2

画像をページに追加したり、読み込まれた後に非表示にしたりしないでください。

それらを読み込み、サイズを測定し ( jQuery: 外部画像の寸法を取得する方法 、画像読み込み時のjQuery コールバック (画像がキャッシュされている場合でも)を参照)、必要になったら DOM に追加します。

于 2012-10-16T16:17:51.947 に答える
1

@Bergiの答えを拡張する：

一般的に行われているのは、画像要素を必要な場所にレンダリングすることですが、それらsrcを他の 1 ピクセルのダミー画像に置き換えて、実際のソースを別の場所 (データ属性など) に保持します。

<img src="/img/dummy.png" data-original-src="/img/path/to/real-image.png">

次に、ページの準備ができたら (完全に読み込まれる前に、jQuery.ready を使用します)、それらの画像をすべて見つけて、元のソースを使用して対応する外部画像を作成します。

そのような外部画像ごとに、読み込まれると（jQueryの画像読み込みコールバックを使用） 、サイズを測定してsrc、最後に元の画像を実際のソースに置き換えることができます。これは、ブラウザーが既に読み込まれているため、瞬時に行われますこの画像の URL:

$('img').each(function() {
   var originalImg = $(this);
   var externalImg = $('<img>').attr('src', originalImg.data('original-src'));
   externalImg.load(function() { 
        // measure, scale, center, and pre-process as you wish
        originalImg.attr('src', externalImg.attr('src'));
        originalImg.data('original-src', null);
   }); // you'll also have to use .complete() here, see links for details
}

これにより、画像が完全にロードされ、拡大縮小 (または中央揃え、または前処理) する機会が得られるまで、画像が表示されません。

于 2012-10-16T16:24:45.017 に答える