0

非常に画像が重い Web アプリケーションを構築しています。その特徴は、ユーザーが一連の年をスクロールできるインタラクティブなタイムラインです。毎年、20 ～ 50 枚の画像を含むフォト ギャラリーがあります。読み込み時に画像を非表示にし、オンデマンドで読み込む (クリック イベント) ための最適なソリューションを探しています。以下にいくつかのオプションを示します。

1) javascript を使用して、必要に応じて data-src を実際の src に割り当てます。

<img src="blank.png" data-src="images/real-image.jpg">

2) すべての画像を、display:none の div 内に配置します。一部のブラウザはまだロード時にこれらの画像をロードしていると思いますので、良い考えではないかもしれません

<div style="display:none">
  <img src="images/real-image.jpg">
</div>

3) レイジーロードなどの手法を使用します。このプラグJAILを使用すると、イベントがトリガーされた後に画像をロードできます。

前もって感謝します！

4

2 に答える 2

3

1番いいです。ただし、src がどこにもポイントしないsrc=""か、単一のプレースホルダー イメージをポイントするようにします。画像ファイルが必要な場合は、src を実際のパスに切り替えると、ブラウザがそれをロードします。削除のためにもう一度切り替えます。その後、ファイルはガベージ コレクターにとって公正なゲームです。
2 番目は非表示にしますが、画像をロードします。ナンバー 3 は、基本的にナンバー 1 と同じことを行います。（最初の投稿、評判はありませんが、私が助けてくれることを願っています）.

于 2013-08-01T14:58:55.933 に答える
0

私は次のテクニックを使用します。

// Contains Image path strings that can be loaded statically or dynamically
var imgs = [img1, img2, img3, img4];
var img = new Image();
img.style.cssText = "position: absolute; visibility: hidden; display: block";
document.body.appendChild(img);

for (var i = 0 ; i < imgs.length ; i++)
    img.src = imgs[i];

反復ごとに画像の HTTP リクエストがポストされ、後で到着時にキャッシュされます。
これは私にとってはうまくいきます。サーバー側の生成を使用して、文字列パスを HTML に読み込みます。

于 2013-08-01T15:03:43.083 に答える