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預加載窗口加載後的圖像

回答

相關問題