Question

我的预加载器似乎在iPad上不稳定，即使它在PC和MAC上的所有主流浏览器中都能正常运行。

有时候它有效，有时它没有，但是如果我清除缓存，它总是在第一次尝试时失败..我真的被困在这里，所以任何帮助都会受到赞赏！

这是我的代码：

    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

新编辑我有19张照片。它运行了forloop 19次。当错误发生时，我通常得到18“onload”（但已经看到低至16）并且从未出现任何“onerror”。

看起来它是没有被触发的onerror功能（尽管它触发了MAC和PC上的所有主要浏览器，如果我只删除其中包含的id中的一个图像，它会在iPad上触发列表）..听起来不错吗？ - 如果确实如此，我怎样才能让它发挥作用？

Answer 1

您的代码似乎会在错误和onload上增加loadedimages。尝试这样的事情（这会在错误时重试预加载，如果图像失败达到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'); });
});

Javascript在iPad上预加载图像

1 个答案: