Javascript ipad safari停止运行内存不足的代码事件（使用1个图像对象进行画布）

（是的，我来自瑞典，所以我的英语可能并不完美；）

我的ipad内存有问题。此代码不会使broser崩溃，但会停止。在某些时候，它永远不会进入Image对象上的任何事件处理程序。我不知道为什么。。？我在论坛上搜索了几天，在谷歌上搜索了一些变通方法。但它们并不真正符合我想要达到的目标（？）。（因为我只有一个图像对象）

我创建的内容如下：

1个用户可见的主画布

我画的其他16幅画布

1个图像对象，用于加载图像

所有图像均为带有alpha的PNG，尺寸为900x373 px。所有画布的尺寸都相同

在另外16幅画布上，画了8幅图像

其目的是能够旋转具有可交换层的对象。 （1角度是一个不同角度的对象，因此当主循环运行时，它看起来像在旋转。）旋转应该由触摸/鼠标控制，但这应该说明我想要实现的目标

我知道这有很多代码要看，而且可能也不是最好的代码，因为我是javascript的新手。不过，它在我的chrome笔记本电脑上运行良好

我读过一些关于持有imageObjects引用的事件的文章，因此它们不会得到GC'd。但这是否意味着我只有一个图像对象？ 我还尝试使用jquery语法添加和删除侦听器，但没有成功

如果有人愿意花时间回答这个问题，我们将不胜感激

向奥斯卡致意

变量的初始化：

        var drawingCanvas = null;
        var context = null;         
        var numAngles = 8;
        var angleStep = 32/ numAngles;  
        var canvasAngles = [];      
        var loadStatus = {};    
        var basePath = "assets_900/";       
        var layerPaths = [];
        var layerPathsA = ["black/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
        var layerPathsB = ["red/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
        var layerPathsC = ["black/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];
        var layerPathsD = ["red/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];            
        var layerPathsArr = [layerPathsA,layerPathsB,layerPathsC,layerPathsD];
        layerPathsCounter = 0;

        var numLayers = layerPaths.length;

        var imageInit = null;           
        var SW = 900;   //1920
        var SH = 373;    //796
        var loopcounter = 0;

画布和其他stuf的首次设置：

layerPaths = layerPathsArr[0];           


             drawingCanvas = document.getElementById('myDrawing');
             context = drawingCanvas.getContext('2d');              

            for(var i = 0; i < numAngles; i++){
                var canvas = document.createElement('canvas');                  
                var canvasContext = canvas.getContext('2d');
                canvasContext.createImageData(SW, SH);
                canvas.height = SH;
                canvas.width = SW;                  
                canvasAngles.push(canvas);                  
            }

这是一个加载图像的循环： 当它加载了8幅图像时，它会在16幅画布中的一幅上绘制它们，然后在可见画布上绘制该画布。然后它加载一个新角度和8个新图像，依此类推

            function loadImage(pathIndex,layerIndex,angleIndex){
                    if(layerIndex  < layerPaths.length ){
                        //logger.log("path :" + pathIndex +" lajr : "+ layerIndex + " angl: " + angleIndex);                            

                        imageInit = new Image();        

                        imageInit.onload = function(){                              

                            var canvas = canvasAngles[angleIndex];
                            var canvasContext = canvas.getContext('2d');
                            canvasContext.drawImage(imageInit,0, 0);                                        

                            imageInit.onload = null;
                            imageInit.onerror = null;
                            imageInit.onabort = null;

                            imageInit.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
                            imageInit = null;
                            delete imageInit;

                            loadImage(pathIndex,layerIndex+1,angleIndex);                           
                        }

                        imageInit.onerror = function(){
                            logger.log("Error loading, retrying....");
                            loadImage(pathIndex,layerIndex,angleIndex);         
                        }
                        imageInit.onabort = function(){
                            logger.log("Error loading (aborted)");
                        }                   

                        var path = "";
                        if(pathIndex < 10){
                            path = basePath + layerPaths[layerIndex] + "img000"+ pathIndex + ".png";
                        }else{
                            path = basePath + layerPaths[layerIndex] + "img00"+ pathIndex + ".png";
                        }                           
                        imageInit.src = path;
                    }else{      

                        displayAngle(angleIndex);

                        if(angleIndex > numAngles-2){

                            logger.log("turns : " + loopcounter++ +" C: " + layerPathsCounter);
                            clearCanvases();
                            loadImage(0,0,0);

                            layerPathsCounter++;

                            if(layerPathsCounter > layerPathsArr.length-1){
                                layerPathsCounter = 0;
                            }                               
                            layerPaths = layerPathsArr[layerPathsCounter];                              
                        }else{
                            loadImage(pathIndex+angleStep,0,angleIndex+1);
                        }       
                    }
                }

函数加载图像（路径索引、层索引、角度索引）{
if（层索引<层路径长度）{
//logger.log（“路径：“+pathIndex+”lajr:“+layerIndex+”angl:”+angleIndex）；
imageInit=新图像（）；
imageInit.onload=函数（）{
var canvas=画布角度[angleIndex]；
var canvasContext=canvas.getContext（'2d'）；
drawImage（imageInit，0,0）；
imageInit.onload=null；
imageInit.onerror=null；
imageInit.onabort=null；
imageInit.src=“data:image/gif；base64，r0lgodlhaqaabaiap///waaach5baeaaaaaaaaaaaaaaaaaaaaaaaaicraaow==”；
imageInit=null；
删除imageInit；
loadImage（路径索引、层索引+1、角度索引）；
}
imageInit.onerror=函数（）{
logger.log（“加载错误，重试…”）；
loadImage（路径索引、层索引、角度索引）；
}
imageInit.onabort=函数（）{
logger.log（“加载错误（中止）”；
}                   
var路径=”；
如果（路径索引<10）{
路径=基本路径+图层路径[layerIndex]+“img000”+路径索引+“.png”；
}否则{
路径=基本路径+图层路径[layerIndex]+“img00”+路径索引+“.png”；
}                           
imageInit.src=路径；
}否则{
显示角度（角度索引）；
如果（角度索引>numAngles-2）{
log（“turns:+loopcounter++++”C:+layerPathsCenter）；
透明画布（）；
loadImage（0,0,0）；
LayerPathsCenter++；
如果（图层路径中心>图层路径长度-1）{
LayerPathsCenter=0；
}                               
layerPaths=LayerPathsar[LayerPathsCenter]；
}否则{
loadImage（路径索引+角度步长，0，角度索引+1）；
}       
}
}

以下是几个辅助函数：

            function clearCanvases(){                   
                for(var i = 0; i < numAngles; i++){
                    var canvas = canvasAngles[i];
                    var canvasContext = canvas.getContext('2d');
                    canvasContext.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);                     
                }                           
            }

            function displayAngle(index){                                               
                context.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);           
                var canvas = canvasAngles[index];
                context.drawImage(canvas,0,0);                      
            }

函数clearCanvases（）{
对于（变量i=0；i

HTML:

    <body >     
    <canvas id="myDrawing" width="900" height="373">
        <p>Your browser doesn't support canvas. (HEHE)</p>
    </canvas>        
</body>

您的浏览器不支持画布。（呵呵）

一个选项卡中似乎只能加载~6.5 mb的数据。据我所知，没有办法释放这段记忆（？）

这将在ipad上加载约13 500kb的imqages，然后停止

它

    <body >     
    <canvas id="myDrawing" width="900" height="373">
        <p>Your browser doesn't support canvas. (HEHE)</p>
    </canvas>        
</body>