小编Lee*_*e H的帖子

我正在研究一些代码,这些代码将按顺序加载一堆(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) { …