使用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

}

Answer 2

這是我如何做到的一個例子

這與您的方法略有不同，但我認為它可以為您提供所需的結果。

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

這是工作小提琴 。 代碼如下：

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);
});

注意：請參閱此答案 ，了解有關通過代碼加載圖像的其他問題，因為如果在緩存中找到圖像，並非所有瀏覽器都會觸發loaded事件。