使用jQuery顺序加载和淡入元素

Question

我正在研究一些代码,这些代码将按顺序加载一堆(20+)大图像(每个~500 KB).每个图像加载之后,它消失.我用这个小提琴从这个讨论为起点.

我已经按照我想要的方式加载图像,但是我需要做其他一些事情而不会破坏这种顺序加载.我需要在第三个和第四个图像之间加载包含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>

我可以很好地加载图像,但我仍然坚持如何只在前三个加载后加载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的新手.任何帮助将不胜感激!

Answer 1

一个可能的解决方案是在每个 loadImage 函数调用中轮询加载图像的长度，如下所示

loadImage(){
//stuff 
if($('#container img').length == 4){
    insertIframeMarkup(); 
}

//other stuff

}