jQueryを使用して要素を順次読み込んでフェードインする

Question

私は大きな画像（〜500 KBずつ）を連続してロードするコードをいくつか作成しています。各画像がロードされた後、フェードインします。this fiddleをthis discussionから開始点として使用しました。

イメージは私が欲しいと思うようにロードされていますが、この順次ロードを中断することなく、いくつかのことを行う必要があります。 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がロードされた後にのみ、そのインラインフレームをロードする方法で立ち往生していますし、その後の残りの部分を持っています画像が読み込まれ、リンクが表示されます。ここに私の現在の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"); 

は「いいえ」は、変数を経由サイクルへの画像の数を設定します（私は画像の数が異なる複数のページにこれを実行する必要があります）、およびloadImages機能はの引数を取ります配列を循環させ、画像をどこに置くか。このコードはおそらくもっときれいかもしれませんが、私はjavascriptを初めて使っています。どんな助けでも大歓迎です！

Answer 1

可能な解決策は、これはあなたのアプローチよりも少し異なっているので、

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

//other stuff 

} 

Answer 2

Here is an example of how i did it

のように各loadImage関数呼び出しで読み込んだ画像の長さをポーリングするだろうが、私はそれを考えますあなたが探している結果をあなたに与えてください。ここで

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

注：画像がキャッシュ内のすべてのブラウザ火災loadedイベントを発見されていないかのように、コードを経由してロード・イメージに関する別の質問にthis answerを参照してください。