2

1 つの Web サイトで CSS3 フルスクリーン ギャラリー (JavaScript なし) を使用しています。ギャラリーは基本的に、各リスト アイテムが 1 つのフルスクリーン背景である順序付けられていないリストです。

各リスト アイテムの CSS ファイルに背景画像を設定することで機能します。現在、ギャラリーには 48 枚の画像があり、ページの読み込みに時間がかかりすぎます。

最初のビューは約 35 秒です。ブラウザーは最初にすべての DOM 要素をロードするようで、時間がかかりすぎます。

ページの読み込み時に一部のリスト項目要素を読み込まずに、ページが読み込まれた後にのみ表示する方法はありますか?

Web サイトはhttp://www.steveezell.comで見ることができます。

4

2 に答える 2

0

HTML ソースで画像を宣言している場合は、ページの読み込み中に常に読み込まれます。画像ソースを JavaScript から変更するのが最善の方法だと思います。

ps: 素敵なページ

于 2012-10-02T21:52:52.747 に答える
0

ページが完全にロードされた後、AJAX 呼び出しを使用できます。

// Load the script when the page has fully loaded:

$(window).load( function() {
$.getScript(‘your_3rd_party-script.js’);
});

RetrieveImages.js:

// Load here all the images (You might consider showing the first image 
// or images with the regular page loading  to show a first indication to the user 
// and avoid waiting for the page to finish load before showing something).

document.getElementById("myImg").src = "http://www.example.com/image?id=1";

クラスごとにすべての画像をロードするには、おそらく jQuery のグループ化を使用する必要があります$(".className")。

使用しているサーバー側のコードは何ですか? gzip 圧縮を有効にすることをお勧めします。これにより、画像のサイズが大幅に縮小されます。

于 2012-10-02T22:05:53.090 に答える