24

Web ページ上の画像の読み込み順序を制御する方法はありますか? 最初に軽量の「LOADING」グラフィックをロードして、プリローダーをシミュレートしようと考えていました。何か案は？

ありがとう

4

4 に答える 4

22

Javascriptを使用し、src後で画像のプロパティを設定します。は#ブラウザにページ上のURLにリンクするように指示するため、サーバーにリクエストは送信されません。（srcプロパティが空の場合でも、サーバーにリクエストが送信されます-あまり良くありません。）

onload画像アドレスの配列をアセンブルし、それを再帰的に処理して、画像を読み込み、各画像のoronerrorメソッドが値を返したときに再帰関数を呼び出します。

HTML：

<img src='#' id='img0' alt='[]' />
<img src='#' id='img1' alt='[]' />
<img src='#' id='img2' alt='[]' />

JS：

var imgAddresses = ['img1.png','img2.jpg','img3.gif'];

function loadImage(counter) {
  // Break out if no more images
  if (counter==imgAddresses.length) { return; }

  // Grab an image obj
  var I = document.getElementById("img"+counter);

  // Monitor load or error events, moving on to next image in either case
  I.onload = I.onerror = function() { loadImage(counter+1); }

  //Change source (then wait for event)
  I.src = imgAddresses[counter];
}

loadImage(0);

で遊ぶこともできますdocument.getElementsByTagName("IMG")。

ちなみに、画像の読み込みが必要な場合は、ここから始めるとよいでしょう。

編集

サーバーへの複数のリクエストを回避するには、ほぼ同じ方法を使用できます。画像要素を読み込む準備ができるまで、画像要素を挿入しないでください。各画像を待機する<span>コンテナを用意します。次に、ループしてスパンオブジェクトを取得し、画像タグを動的に挿入します。

var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...

次に、要素が作成されるときに、画像要求が1回だけ行われます。

于 2010-11-18T03:53:10.303 に答える
5

この記事https://varvy.com/pagespeed/defer-images.htmlは、非常に優れたシンプルなソリューションを提供すると思います。「空の」 <img> タグを作成する方法を説明する部分に注意してください。

<img src=" data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= " data-src="your-image-here">

<img src="">を避ける

読み込み中の画像を表示するには、それを HTML に配置し、後で適切な瞬間/イベントで変更します。

于 2015-09-14T01:54:38.723 に答える
4

他の画像の前に「読み込み中」の画像を含めるだけです。通常、それらはページの一番上に含まれ、ページの読み込みが完了すると、JS によって非表示になります。

于 2010-11-18T04:15:20.547 に答える
3

これを行う小さな jQuery プラグインを次に示します: https://github.com/AlexandreKilian/imageorder

于 2013-04-17T12:32:12.643 に答える