Javascript在窗口加载后预加载图像

我正在做一个项目，需要用户将图像加载到画布中，画布根据用户的选择放置在灯箱中

在用户单击按钮之前，不会加载任何图像，然后在XHR请求中接收图像URL

我在加载图像和延迟执行下面的代码方面遇到问题

我的图像加载函数如下所示

function preloadImage(url){
    var img = new Image();
        if (!img.complete) {
            console.log('not complete');
            //return false;
        }
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log('no width');
            //return false;
        }
    img.onerror='Image failed to load...';
    img.src = url;
}

在代码中，我在设置画布元素之前调用它。。。这个

preloadImage(url);
setstage(url);

---

画布有时会及时获取图像以设置我的舞台，但有时不会，因此我有一个空白舞台：/。有什么方法可以做到这一点并以某种方式解决此图像预加载问题吗？

尝试在预加载图像中使用回调：

 function preloadImage(url, callback) {

    var img = new Image();

    img.onerror = function() {

        callback('error', url, img);
    };

    img.onload = function() {

        callback(null, url, img);
    };

    img.src = url;
}

preloadImage(url, function(err, url, img) {

    if (err) {
        console.log('something wrong!!', url);
        return;
    }

    //get more params from img..
    setstage(url);
});

---

有多种方法可以做到这一点。最简单的方法是等待调用

setStage

，直到触发

img.onload

事件。如果出于任何原因（不确定可能是什么原因），您需要在与

预加载图像（url）

相同的范围内执行此操作，你可以通过

图像中返回的承诺来完成下一步。onload

回调。

我迫于压力想出了一个相当可靠和稳定的解决方案，最后我读了很多书，，，从一系列在线文章和其他开发人员的经验中，我得到了一个可靠的回调预加载

功能就是这样

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
        }
    }
}

---

如果任何人有改进，欢迎您展开并发表评论，也许有人会从中受益。

只需使用图像的

onload

事件。您可以在preload image中调用setstage吗？嗯。。我想我可以重写代码来做到这一点，是的。。。您的意思是将img.onload=function（）{//execute setstage（url）放在这里}；在预加载函数中？我假设我的回调函数可以有x个参数（而不仅仅是一个）？我使用的实际函数接收6个参数。setstage（srcx，id，x，y，width，height）我不确定这些参数是什么意思，但你可以从img元素本身获得它们，对吗？不，不，这些参数被传递到set stage函数，该函数创建了画布上的stage元素，它们不是来自图像，而是画布上的图像。对不起，我可能不明白你的意思。但callback只是传递给preload image的一个函数param，与“setstage”无关。您可以在任何地方调用preload image，比如在foo中，并且仅当这些参数在范围内时才将任何参数传递给setstage。

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
        }
    }
}

 preloadimages(IMAGES-ARRAY).done(function(images){
      // code that executes after all images are preloaded
  });