Question

我正在开发一个项目，要求用户将图像加载到画布中，该画布根据他们所做的选择放置在灯箱中。

在用户点击按钮之前没有加载任何图像，然后在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;
}

在代码中我在设置canvas元素之前调用它......这个......

preloadImage(url);
setstage(url);

画布有时会及时获得图像来设置我的舞台，但有时候不是这样我有一个空白阶段：/。有没有办法可以做到这一点并以某种方式解决这个图像预加载问题？

Answer 1

尝试在preloadImage中使用回调：

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

...

function foo() {

    //here are some params
    var srcx = 1, id = 2, x = 3, y = 4;

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

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

        //more params
        var width = 5, height = 6;

        setstage(srcx, id, x, y, width, height);
    });
}

Answer 2

有多种方法可以做到这一点。最简单的是等待setStage调用，直到img.onload事件触发。如果由于某种原因（不确定可能是什么原因）需要在与preloadImage(url)相同的范围内执行此操作，则可以通过image.onload回调中返回的承诺执行下一步。 / p>

Answer 3

我真的很有压力想出一个相当稳定和稳定的解决方案，我最终做了很多阅读，从一系列在线文章和其他开发人员的经验中我得到了一个可靠的预装回调。 ..

这个功能就是这个......

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

如果有人有改进，欢迎您进行扩展和评论，也许有人会从中受益。

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

3 个答案: