Javascript 画布上未加载多个图像

我已经创建了一个圆使用弧形以下的方式

var startAngle=0；
var arc=Math.PI/6；
var-ctx；
var leftValue=275；
var-topValue=300；	
var wheelImg=[”http://i.stack.imgur.com/wwXlF.png","http://i.stack.imgur.com/wwXlF.png“，”cat.png“，”cock.png“，
“croco.png”、“dog.png”、“eagle.png”、“elephant.png”、“lion.png”，
“monkey.png”、“rabbit.png”、“sheep.png”]；
函数drawWheelImg（）
{
var canvas=document.getElementById（“canvas”）；
if（canvas.getContext）
{
var=260；
var=217；
var insideRadius=202；
ctx=canvas.getContext（“2d”）；
对于（变量i=0；i<12；i++）
{
var角度=星形缠结+i*弧；
ctx.beginPath（）；
ctx.弧（左值、顶值、半径、角度、角度+弧、假）；
ctx.弧（左值、顶值、内半径、角度+弧、角度、真值）；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.弧（左值、顶值、半径、角度、角度+弧、假）；
ctx.shadowBlur=3；
ctx.shadowColor=“#A47C15”；
ctx.stroke（）；
ctx.closePath（）；
ctx.save（）；
ctx.translate（leftValue+数学cos（角度+圆弧/2）*文本半径，
topValue+数学sin（角度+圆弧/2）*文本半径）；
ctx.旋转（角度+圆弧/2+数学PI/2）；
var img=新图像（）；
img.src=车轮img[i]；
ctx.drawImage（img，-44，-25,50,40）；
ctx.restore（）；
}
}
}	
函数自旋（）
{
drawWheelImg（）；
}
drawWheelImg（）
旋转
您希望预加载图像

要做到这一点，您可以在页面底部关闭标记之前开始加载

<script>
    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = name;      // set the src
        images.push(image);    // push it onto the image array
    });
</script>         

注意完成

并不意味着已加载。如果证明URL错误或存在其他错误，则完整标志仍将为真。“完成”表示浏览器已完成对图像的处理。如果图像可能会失败，则必须添加

onload

事件

处理错误

如果您不确定图像不会加载，则必须制定策略来处理丢失的内容。你需要回答这样的问题，比如，我的应用程序在没有图像的情况下能正常运行吗？是否有其他来源获取图像？有没有办法确定这种情况发生的频率？我该如何阻止这种情况发生

在最简单的级别上，您可以通过在

onload

事件期间向image对象添加自己的信号量来标记图像已加载

    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // function to flag image as loaded
    function loaded(){
        this.loaded = true;
    }
    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = name;      // set the src
        image.onload = loaded; // add the image on load event
        images.push(image);    // push it onto the image array
    });

然后在代码中，您将在使用图像之前检查加载的信号量

// draw the first image in the array
if(images[0].loaded){  // has it loaded
    ctx.drawImage(images[0],0,0);  // yes so draw it
}

关键内容

如果你有应用程序运行所需的图像，那么如果加载图像时出现问题，你应该重定向到错误页面。您可能有多台服务器，因此在放弃之前也可以尝试不同的来源

如果您需要停止应用程序或尝试其他URL，则必须拦截

onerror

图像事件

为了简化图像的使用（100%确保在应用程序运行时加载图像），您应该仅在加载所有图像时启动使用图像的部分。一种方法是对正在加载的所有图像进行计数，并在图像加载时倒计时。当计数器为零时，您知道所有图像都已加载，然后您可以调用应用程序

下面将加载图像，如果它们失败，它将尝试另一个服务器（源），直到没有更多选项，此时您应该重定向到相应的错误页面，以通知客户端有猴子在工作中使用扳手。它统计加载的图像，当所有图像加载完毕后，它将启动应用程序运行，确保所有图像内容都可以安全使用

    // Server list in order of preferance
    var servers = ["https://fakesiteABC.com/", "http://boogusplace.com/", "http://foobarpoo.com.au/"];

    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // loading count tracks the number of images that are being loaded
    var loadingImageCount = 0;
    // function to track loaded images
    function loaded(){
        loadingImageCount -= 1;
        if(loadingImageCount === 0){
              // call your application start all images have loaded
              appStart();
        }
    }
    // function to deal with error
    function loadError(){  // the keyword "this" references the image that generated the event.
        if(this.retry === undefined){  // is this the first error
            this.retry = 1;   // point to the second server
        }else{
            this.retry += 1;  // on each error keep trying servers (locations)
        }
        // are the any other sources to try?
        if(this.retry >= servers.length){  // no 11
            // redirect to error page.
            return;
        }
        // try a new server by setting the source and stripping the 
        // last server name from the previous src URL
        this.src = servers[this.retry] + this.src.replace( servers[ this.retry - 1],"");
        // now wait for load or error
    }


    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = servers[0] + name;      // set the src from the first server
        image.onload = loaded; // add the image on load event
        image.onerror = loadError; // add the image error handler
        images.push(image);    // push it onto the image array
        loadingImageCount += 1; // count the images being loaded.
    });

---

还有许多其他的策略来处理丢失的内容。这只是显示了所使用的一些机制，并没有定义一个完美的解决方案（没有）

为什么不在开始使用它们之前简单地预加载它们？看起来依赖于

ctx.save

和

ctx.restore

将扼杀一种逐个加载的方法。你预先知道有多少个图像，所以你知道应该触发多少次图像的onload事件。。。在开始使用任何图像之前，请在应用程序开始时预加载所有图像。谷歌上有几十个图像预加载程序。我认为这对我的情况不起作用。如果图像未加载怎么办。在这里，我给所有的网址正确和静态。所以不可能出现错误的url。

    // Server list in order of preferance
    var servers = ["https://fakesiteABC.com/", "http://boogusplace.com/", "http://foobarpoo.com.au/"];

    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // loading count tracks the number of images that are being loaded
    var loadingImageCount = 0;
    // function to track loaded images
    function loaded(){
        loadingImageCount -= 1;
        if(loadingImageCount === 0){
              // call your application start all images have loaded
              appStart();
        }
    }
    // function to deal with error
    function loadError(){  // the keyword "this" references the image that generated the event.
        if(this.retry === undefined){  // is this the first error
            this.retry = 1;   // point to the second server
        }else{
            this.retry += 1;  // on each error keep trying servers (locations)
        }
        // are the any other sources to try?
        if(this.retry >= servers.length){  // no 11
            // redirect to error page.
            return;
        }
        // try a new server by setting the source and stripping the 
        // last server name from the previous src URL
        this.src = servers[this.retry] + this.src.replace( servers[ this.retry - 1],"");
        // now wait for load or error
    }


    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = servers[0] + name;      // set the src from the first server
        image.onload = loaded; // add the image on load event
        image.onerror = loadError; // add the image error handler
        images.push(image);    // push it onto the image array
        loadingImageCount += 1; // count the images being loaded.
    });