1

サイドスクローラーであるWebページがあります。現時点ではすべてのコンテンツがページの読み込み時に読み込まれますが、これは巨大なページに変わりつつあります! 画像などに遅延読み込みを適用しました...しかし、スムーズではなく、ページをナビゲートしようとしてぎこちなく感じます.

7 つの「ペイン」があり、各ペインには一意の ID を持つ親 DIV タグがあります。私がやりたいのは、ペイン 2 が表示され、読み込み中の gif が表示され、すべてのコンテンツ/画像が読み込まれるまで div が空白になることです。コンテンツ/画像が読み込まれると、ローダーが消え、コンテンツがフェード インします。これは、すべてのペイン 2 ～ 7 で繰り返されます。

私は多数のjqueryスクリプトとメソッドを見てきましたが、これを具体的に実現する方法について頭を悩ませているようには見えません。これは遅延読み込みに似ていますが、画像だけでなく div 全体を対象としています。ページをバックグラウンドで読み込むようにしたいのですが、たとえば、まだダウンロードされていないペイン 3 が表示されて、画像が読み込まれているというぎこちない光景がユーザーに表示されないようにします。

これは簡単ですか？私は何が欠けていますか？

4

3 に答える 3

0

これを実現する方法はたくさんありますが、最も簡単な方法は、jQueryのgetメソッドを使用してアクティブなスライドの実際のHTMLを取得することです。

$.get('slide2.html', function(respHTML) {
   $(respHTML).appendTo($("#contentFrame"));
},'html');

HTMLを追加する前にすべての画像を選択してプリロードすることができます。また、画像をプリロードする方法は多数あります。

var respHTML = $(respHTML);
var imagesToPreload = respHTML.find('img');
var imagesPreloaded = 0;
var imagesLength = imagesToPreload.length;
imagesToPreload.each(function(i,img) {
    // preload img
    imagesPreloaded++;
    if(imagesPreloaded == imagesLength) {
       // your images are ready
    }
});
于 2012-08-15T14:27:04.537 に答える
0

ここで遅延画像読み込みのために行ったのと同様に、トランジションとメディアクエリで CSS トリックを使用できます。

于 2013-06-05T17:02:55.067 に答える
0

おそらくjQuery 用のappear プラグインが必要でしょう。

于 2012-08-15T14:40:05.390 に答える