大量の（20以上の）大きな画像（それぞれ約500 KB）を順番にロードするコードに取り組んでいます。各画像が読み込まれると、フェードインします。このディスカッションのフィドルを出発点として使用しました。
画像は希望どおりに読み込まれますが、この順次読み込みを中断せずに、他のいくつかのことを行う必要があります。3番目と4番目の画像の間にiframeを含むマークアップをロードする必要があり、画像の後にリンクをロードする必要があります。必要なマークアップ出力の例を次に示します。
<div id="container">
<img src="img-1.jpg" />
<img src="img-2.jpg" />
<img src="img-3.jpg" />
<div><iframe></iframe></div>
<img src="img-4.jpg" />
<img src="img-5.jpg" />
<img src="img-6.jpg" />
<img src="img-7.jpg" />
<img src="img-8.jpg" />
<img src="img-9.jpg" />
<a href="/link/">Link text</a>
</div>
画像は問題なくロードできますが、最初の3つがロードされた後でのみ、そのiframeをロードし、残りの画像をロードしてから、リンクをロードする方法に固執しています。これが私の現在のJavaScriptです：
var no = 22,
main = [],
i;
for (i = 1; i <= no; i++) {
main[i] = "path/to/image/folder/img-" + i + ".jpg";
}
function loadImages(arr,loc) {
if (arr.length === 0) {
return;
}
function imageLoaded(img) {
$(img).hide().appendTo(loc).fadeIn(800);
}
function loadImage() {
var url = arr.shift(),
img = new Image(),
timer;
img.src = url;
if (img.complete || img.readyState === 4) {
imageLoaded(img);
if (arr.length !== 0) {
loadImage();
}
}
else {
timer = setTimeout(function() {
if (arr.length !== 0) {
loadImage();
}
$(img).unbind("error load onreadystate");
}, 10000);
$(img).bind("error load onreadystatechange", function(e) {
clearTimeout(timer);
if (e.type !== "error") {
imageLoaded(img);
}
if (arr.length !== 0) {
loadImage();
}
});
}
}
loadImage();
}
loadImages(main,"#container");
「no」変数は、循環する画像の数を設定し（画像の数が異なる複数のページでこれを行う必要があります）、loadImages関数は、循環する配列と画像の配置場所の引数を取ります。このコードはおそらくもっときれいかもしれませんが、私はjavascriptを初めて使用します。どんな助けでも大歓迎です！