자바 스크립트 iPad에서 이미지 미리로드

Question

내 프리 로더가 PC와 MAC의 모든 주요 브라우저에서 완벽하게 작동하지만 iPad에서 불안정한 것으로 보입니다.

때로는 작동하지만 때로는 작동하지 않지만 캐시를 지우면 첫 시도에서 allways가 항상 실패합니다 .. 정말 도움이되었으므로 도움이 될 것입니다.

이

내 코드입니다 :

function preloadimages(arr){ 

    var newimages=[], loadedimages=0 
    var postaction=function(){} 
    var arr=(typeof arr!="object")? [arr] : arr 
    function imageloadpost(){ 
     loadedimages++ 
     if (loadedimages==arr.length){ 
      postaction(newimages) //call postaction and pass in newimages array as parameter 
     } 
    } 
    for (var i=0; i<arr.length; i++){ 
     newimages[i]=new Image() 
     newimages[i].src=arr[i] 
     newimages[i].onload=function(){ 
      imageloadpost() 
     } 
     newimages[i].onerror=function(){ 
      imageloadpost() 
     } 
    } 
    return { //return blank object with done() method 
     done:function(f){ 
      postaction=f || postaction //remember user defined callback functions to be called when images load 
     } 
    } 
    } 

    $(document).ready(function(){ 

    preloadimages(['img/bg_joejuice.jpg', 
        'img/bg_facebook.jpg', 
        'img/bg_webshop.jpg', 
        'img/bg_spotify.jpg', 
        'img/btn_grey_down.png', 
        'img/btn_pink_down.png', 
        'img/coffee_active.png', 
        'img/juice_normal.png', 
        'img/sandwich_active.png', 
        'img/remove_down.png', 
        'img/inc_down.png', 
        'img/dec_down.png', 
        'img/checkbox_unchecked.png', 
        'img/hide_spotify.png', 
        'img/logo_facebook_active.png', 
        'img/logo_joejuice.png', 
        'img/logo_spotify_active.png', 
        'img/logo_webshop_active.png', 
        'img/checkbox_unchecked.png',] 
    ).done(function(){ 
     console.log("loaded"); 
    }); 
}); 

편집 : .. 지정하지 죄송합니다

내가 콘솔 (관련)에 오류를 얻을, 그리고이 지점에 도착하지 않는

곳을 로드 된 주석을 기록합니다.

http://md4a1215.keaweb.dk

NEW EDIT 나는 19 개 그림을 얻었다. forloop은 19 번 실행됩니다. 오류가 발생하면 일반적으로 18 "onload"(그러나 16 이하로 보임)가 발생하고 "onerror"는 발생하지 않습니다.

트리거되지 않은 onerror 기능이있는 것처럼 보입니다 (MAC 및 PC에서 모든 주요 브라우저가 트리거되지만 모든 ID가 포함 된 이미지 중 하나만 제거하면 트리거됩니다) 목록) ..이 소리 맞지? - 그렇다면, 어떻게 작동시킬 수 있습니까?

Answer 1

로드 된 이미지가 onload와 oner뿐만 아니라 onload로 증가하는 것처럼 보입니다. 이와 같은 방법을 시도해보십시오 (오류시 미리로드를 시도하고 maxattempts 시간이 지나면 이미지 건너 뛰기)

function preloadimages(arr) { 
    var newimages = [], loadedimages=0, attempts = 0, maxattempts = 5; 
    var postaction=function(){}; 
    var arr=(typeof arr!='object') ? [arr] : arr; 
    function imageloadpost(){ 
     if (loadedimages == newimages.length){ console.log('Preloading of images complete. Loaded ' + newimages.length + ' images of ' + arr.length + '. Processing postaction.'); postaction(newimages); } 
    } 
    for (var i=0; i<arr.length; i++){ 
     newimages[i]=new Image(); 
     newimages[i].src=arr[i]; 
     newimages[i].onload=function(){ 
      console.log('Loaded ' + loadedimages + ' ' + this.src); 
      attempts=0; 
      loadedimages++; 
      imageloadpost(); 
     }; 
     newimages[i].onerror=function(){ 
      attempts++; 
      if(attempts < maxattempts){ 
       console.log('Failed to load: ' + this.src + ' trying again'); 
       this.src = this.src; 
      } 
      else{ 
       console.log('Skipping ' + this.src); 
       var tSrc = this.src;     
       var thisIndex = -1; 
       for(var i=0; i <arr.length; i++) 
       { 
        if(newimages[i].src === tSrc) 
        { 
         thisIndex = i; 
        } 
       } 
       attempts=0; 
       if(thisIndex >= 0) 
       { 
        console.log('Removing ' + tSrc + ' from image list due to failure to load.'); 
        newimages.splice(thisIndex,1); 
       } 
       else 
       { 
        console.log('Error encountered, could not find ' + tSrc + ' in newimages.'); 
        loadedimages++; 
       } 
       imageloadpost(); 
      } 
     }; 
    } //end of for loop 
    return { done: function(f) { postaction = f || postaction } } 
} 

$(document).ready(function(){ 
    preloadimages(['img/image1.jpg','img/image2.jpg','img/image3.jpg']).done(function() { console.log('Function preloadimages is done'); }); 
});