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

我正在处理一个项目，该项目需要用户将图像加载到放置在基于选择的灯箱中的画布上。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; 
}

并在代码中，我把它叫做之前，我把我的canvas元素...这...

preloadImage(url); 
setstage(url);

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

来源

2014-01-14 GRowing

只需使用图像的'onload'事件。 – meagar

你可以在preloadimage中调用setstage吗？ – pathfinder

mmm ..我想我可以重写代码来做到这一点，是的...你的意思是把img.onload = function（）{//在这里执行setstage（url）};在预加载功能？ – GRowing

我真的很想要提出一个相当稳定和稳定的解决方案，我最终做了一些阅读，从一系列在线文章和其他开发人员的经验，我派生了一个固体预加载回调...

的功能仅仅是这样...

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

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

来源

2014-01-29 22:55:19 GRowing

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

来源

2014-01-14 05:37:33 Andrew

我认为我的回调函数可以有x个参数（不只是一个）？我使用的实际功能接收6个参数。 setstage（srcx，id，x，y，width，height） – GRowing

我不确定这些参数是什么意思，但你可以从img元素本身获得它们，对吗？ – Andrew

不，不，这些参数被传递给舞台上的舞台布景元素，它们不是来自他们“为图像”的图像，因为它将在画布上。 – GRowing

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

来源

2014-01-14 05:38:58 borbulon

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

回答

相关问题