javascript - Javascript 在 iPad 上预加载图像

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 上的所有主要浏览器，并且如果我只删除列表中包含的图像 thst id 之一，它确实会在 iPad 上触发）。 . 这听起来对吗？- 如果是这样，我怎样才能让它工作？

Answer 1

您的代码似乎增加了加载图像 onerror 以及 onload。尝试这样的事情（这会在错误时重试预加载，如果最大尝试次数失败则跳过图像）

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