1 div内のすべての画像の読み込み機能

Question

画像を読み込んでいるときに表示され、画像が読み込まれると非表示になります。

しかし、私はこの機能をいくつかの画像を含む指定されたdivにしたいと考えています。したがって、div内のすべてのイメージがロードされるまで、ローダーイメージが表示されます。

<div id="container"> 
    <img class="image1" src="land1.jpg" \> 
    <img class="image2" src="land2.jpg" \> 
    <img class="image3" src="land3.jpg" \> 
    <img class="image4" src="land4.jpg" \> 
</div> 

唯一のことは、divに最大4つの画像がありますが、1,2,3,4枚の画像になることがあります。しかし、クラス名は変わりません。

正しい方法は何ですか？

Answer 1

すべてイメージの読み込みを追跡でき、すべてのイメージが読み込まれると非表示になります。たぶん、以下のように。

しかし、残っていることが1つあります。画像が利用できない、またはエラーが発生した場合はどうなりますか？これも追跡する必要があります。リスナーにerrorを追加するだけです。

そしてopacityは、最大で1であり、100ではありません。そしてstringの代わりにfloatまたはnumberとして渡すことができます。

var images = $("#container img"); 
var amount = images.length; 
var loaded = 0; 

images.on("load error", function() { 
    ++loaded; 

    if(loaded == amount) { 
     images.css("opacity", 1); 
     $('#loaderimg').hide(); 
    } 
}); 

Working example.