JQuery öğelerini art arda yüklemek ve kaldırmak için öğelerde

Question

Bir dizi (20+) büyük resim (her biri ~ 500 KB) artarda yükleyecek kod üzerinde çalışıyorum. Her görüntü yüklendikten sonra içeri girer. 'u this discussion'dan başlangıç ​​noktası olarak kullandım.

Görüntülerin tam istediğim şekilde yüklenmesini sağladım, ancak bu sıralı yüklemeyi kırmadan birkaç şey yapmam gerekiyor. Üçüncü ve dördüncü görüntüler arasında bir iframe içeren işaretlemeyi yüklemem gerekiyor ve resimlerden sonra bir bağlantı yüklemem gerekiyor. İşte ihtiyacım biçimlendirme çıktı örneğidir:

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

Ben sadece iyi görüntü yükleyebilirsiniz ama ilk üç yüklendikten sonra bu iframe yükleyecek ve sonra geri kalanını olması nasıl şaşırıp görüntüler yüklenir ve sonra bağlantı. İşte benim şimdiki 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"); 

"hayır" değişken arasında gezinmek için resim sayısını belirler (I görüntülerin farklı sayılarla birden çok sayfaya yapmanız gerekir) ve loadImages fonksiyonu için argüman alır dizi arasında geçiş yapmak ve görüntüleri koymak. Bu kod muhtemelen çok daha temiz olabilir, ama javascript için yeniyim. Herhangi bir yardım büyük takdir edilecektir!

Answer 1

olası bir çözüm Bu yaklaşıma göre biraz farklı bu yüzden

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

//other stuff 

} 

Answer 2

Here is an example of how i did it

gibi her LoadImage işlev çağrısında yüklenen görüntülerin uzunluğunu yoklamak olurdu ama bunu düşünmek aradığın sonucu ver.

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

İşte working fiddle olduğunu. kod aşağıda:

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

NOT: görüntüleri önbellekte tüm tarayıcıları yangın loaded olay bulunursa değil sanki kodu aracılığıyla yükleme görüntüleri ile ilgili başka bir soruya this answer bakınız.