Question

我正在研究一些代码，这些代码将按顺序加载一堆（20+）大图像（每个~500 KB）。每个图片加载后，它都会淡入。我使用this fiddle中的this discussion作为起点。

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

}

Answer 2

<强> Here is an example of how i did it

这与您的方法略有不同，但我认为它可以为您提供所需的结果。

var imgArr = ['http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834', 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/MA_Route_2.svg/600px-MA_Route_2.svg.png', 'http://foo.com/foo_873.jpg', 'http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg', 'http://honestreviewscorner.com/wp-content/uploads/2012/10/the-number-4-in-a-circle.jpg1.png', 'http://www.thefrugalette.com/wp-content/uploads/2011/09/number-5.png'];

var count = 0;

function LoadImages(images) {
    img = images[count];
    img = new Image();
    img.src = images[count];

    //Between 3 and 4
    if(count == 4)
    {
        $('<iframe src="http://www.w3schools.com"></iframe>').appendTo('body');
    }


    if (img.complete || img.readyState === 4) {
        $(img).hide().appendTo('body').fadeIn(function () {
            count++;
            if (count < images.length) LoadImages(images);
            else $('body').append('<div>last line</div>')
        })

    } else {
        count++;
        LoadImages(images)
    }

}
LoadImages(imgArr);

Answer 3

这是 working fiddle 。代码如下：

var imgArr = ['http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834', 
    'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/MA_Route_2.svg/600px-MA_Route_2.svg.png',
    'http://1.bp.blogspot.com/-jiW5NeKtZBY/T-nyLRuSSZI/AAAAAAAACaA/Ro8wjmk32ow/s1600/red-number-8.jpg',
    'http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg',
    'http://us.123rf.com/400wm/400/400/zoomzoom/zoomzoom1102/zoomzoom110200070/8913747-4--created-by-light-colorful-digits-over-black-background.jpg',
    'https://twimg0-a.akamaihd.net/profile_images/1633986906/6digits-fist-Logo.png'],
    images=[imgArr.length],
    otherUrls = {}, urlTypes = {
        IFRAME: 0,
        LINK: 1
    };

//INITIALIZE OTHER URLS WITH URL AND INDEX AT WHICH IT WOULD BE LOADED
    function createInfo(url, type, text) {
        var o = {};
        o.URL = url;
        o.Type = type;
        o.Text = text;
        return o;
    }
otherUrls[2] = createInfo("http://http://en.wikipedia.org/wiki/Punjabi_language", urlTypes.IFRAME);
otherUrls[4] = createInfo("http://http://en.wikipedia.org/wiki/Numerical_digit", urlTypes.LINK, "click here [wikipedia]");

function loadImages(arr,loc,other){
    var l=arr.length,i=0, url, idx, o;
    while(arr.length){
        url=arr.shift(),
        idx=(l-arr.length)-1,
        o=other[idx];

        makeImage(url,idx,loc,o);
    }
}

function makeImage(url, idx, loc, other){
    var image=new Image();
    image.src = url;
    images[idx]=image;
    image.onload=function(){
            imageLoaded(idx, loc, other);
        };
    image.onerror=function(){
            var ix=idx,ot=other,lc=loc;
            imageError(ix, lc, ot);
        };
}

function imageLoaded(i,l,o){
    var img=$(images[i]);
    img.hide().css({'display':'block','height':'25px','width':'25px'}).appendTo(l).fadeIn();
    loadOtherObjects(o,img);
}

function imageError(i,l,o){
    // handle 404 using setTimeout set at 10 seconds, adjust as needed
    timer = setTimeout(function () {$(images[i]).unbind("error load onreadystate");}, 10000);
    $(images[i]).bind("error load onreadystatechange", function (e) {
        if (e.type !== "error") {
            imageLoaded(i,l,o);
        }
    });
}

function loadOtherObjects(o,img){
    if (o) {
        console.log(o);
        console.log(o.Type==urlTypes.LINK);
        if (o.Type == urlTypes.IFRAME) {
            var d = $("<div/>").css({'height':'250px','width':'250px'}), f = $("<iframe/>").attr("src", o.URL);
            f.appendTo(d);
            d.insertAfter(img);
        } else if(o.Type == urlTypes.LINK) {
            var lnk = $("<a/>").attr("href", o.URL).text(o.Text);
            lnk.insertAfter(img);
        }
    }
}

$(function(){
    loadImages(imgArr, "#container", otherUrls);
});

注意：请参阅this answer以了解有关通过代码加载图片的其他问题，因为如果在缓存中找到图片，并非所有浏览器都会触发loaded事件。

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

3 个答案: