web-dev-qa-db-ja.com

HTMLでの画像の読み込み順序の制御

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

ありがとう

htmlimageassets
21
Yarin

Javascriptを使用し、画像のsrcプロパティを空のままにします。

画像アドレスの配列を組み立て、再帰し、画像をロードし、各画像のonloadまたはonerrorメソッドが値を返すときに再帰関数を呼び出します。

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回だけ行われます。

20
Ben

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

5
SuperDuck

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

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

<img src = "">を避けるため

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

4
tiomno

これを行う小さなjQueryプラグインは次のとおりです。 https://github.com/AlexandreKilian/imageorder

3
AlexK