最初にいくつかのイメージをロードしてから、（またはその間に）他のイメージをHTMLでロードする方法はありますか？

Question

最初にいくつかの画像をロードしてから、その間にロードする方法はありますか？

ここでは、すべての最初の画像が表示されますは初めてロードされます画像はロードされても問題ありません（最初の画像は大きな画像サイズ）

<ul> 
    <li><img /></li> <!--first image--> 
    <li><img /></li> 
    <li><img /></li> 
</ul> 

<ul> 
    <li><img /></li> <!--first image--> 
    <li><img /></li> 
    <li><img /></li> 
</ul> 

<ul> 
    <li><img /></li> <!--first image--> 
    <li><img /></li> 
    <li><img /></li> 
</ul> 

<ul> 
    <li><img /></li> <!--first image--> 
    <li><img /></li> 
    <li><img /></li> 
</ul> 

... 

Answer 1

画像のロードの順序を制御するjQueryプラグインがあります：https://github.com/AlexandreKilian/imageorder

これはあなたの状況であなたを助けるかもしれません。

Answer 2

生のHTMLでは使用できません。ただし、読み込まれた内容に応じて、JavaScriptを使用して画像を追加することはできます。このような何か：

<ul id="list"> 
    <li id="first-image"><img /></li> <!--first image--> 
</ul> 

次に、JavaScriptを：

var list = document.getElementById('list'); 
var firstImage = document.getElementById('first-image'); 
var listItem = document.createElement('li'); 
var otherImage = document.createElement('img'); 

firstImage.onload = function() { 
    listItem.appendChild(otherImage); 
    list.appendChild(listItem); 
}; 

私は、コードをテストしていませんでしたが、それはこのようなものです。それについての詳細はhereとhereです。

編集：

私はそれについてもう少し読んでいた、と私は以下のコードに少し問題があると思います。この方法を使用すると、DOM要素がロードされたときにイベントがトリガーされますが、画像それ自体はである必要はありません。私は別の解決策を見つけました：

var img = document.querySelector('img') 

function loaded() { 
    alert('loaded') 
} 

if (img.complete) { 
    loaded() 
} else { 
    img.addEventListener('load', loaded) 
    img.addEventListener('error', function() { 
     alert('error') 
    }) 
} 

ソース：this question。