圖像，onload事件不在鉻中工作

我使用html5創建拖放圖像上傳功能。這在Firefox中非常適合我，但在Chrome中，圖像onload事件僅在第一次觸發。如果我只在第一個作品中拖動多個圖像，並且拖動一秒就失敗了。我認爲問題出在圖像上。圖像，onload事件不在鉻中工作

這裏是我的代碼工作我已刪除了不相關的部分方式：

  var img = document.createElement("img"); 
      var reader = new FileReader(); 
      var canvas = document.createElement("canvas"); 
      var canvasData; 
      var ctx = canvas.getContext("2d"); 
      var myFiles; 
      var i = 0; 


       reader.onload = (function (aImg) 
        { 
         return function (e) 
         { 
          aImg.src = e.target.result; 
         }; 
        })(img); 

     img.onload = function(){ 

     //resizes image 
     //draws it to the canvas 
     //posts to server 

     i++; 
     if(i < myFiles.length){ 
     processNext(i); 
          } 
     } 



    function processNext(filei) { 

     var file = myFiles[filei]; 

      img.file = file; 

      reader.readAsDataURL(file); 


     } 

i = 0; 
myFiles = files; 
processNext(0);

有誰知道爲什麼這個工程在Firefox而不是Chrome瀏覽器？從鉻跟蹤

來源

2011-04-28 Early73

你不應該定義圖像的onload加載事件已註冊？ – epascarello 2011-04-28 14:33:25

@epascarello感謝您的回覆，我忘了添加這段代碼，其餘的都是。 img.src在processNext函數中改變 – Early73 2011-04-28 14:43:13

說明：

這是不是一個錯誤。 WebKit只是更嚴格。更換之前，您必須實例化一個新的圖像（）對象，像這樣：

var photo = document.getElementById('image_id'); 
var img = new Image(); 
img.addEventListener('load', myFunction, false); 
img.src = 'http://newimgsource.jpg'; 
photo.src = img.src;

來源：http://code.google.com/p/chromium/issues/detail?id=7731#c12

來源

2011-04-28 15:48:09 Harut

嗯..但是如果我的英文不背叛我，chrome行爲是不正確的，並且load事件必須在每次更改src時觸發下載成功完成。 http://www.w3.org/TR/html5/embedded-content-1.html#the-img-element – Harut 2011-04-28 16:08:10

@Harut感謝您的回覆。我嘗試了你的建議，我加了var img = new Image（）;在更改源代碼之前我的processNext函數中，但我得到的結果與以前相同。你提到每次更改src時都必須觸發load事件我不明白你是否需要手動執行此操作？ – Early73 2011-04-28 16:47:40

我剛纔說FF的行爲似乎是對的。而通用的方式應該是銷燬舊的圖像元素，並創建新的而不是它。 – Harut 2011-04-28 23:43:36

這是奇怪的，沒有以上爲我工作。我將圖像變量定義爲本地，並將其更改爲全局，並開始工作。這有意義嗎？有人可以解釋嗎？

這didnt工作對我來說：

function loadImage() { 
    var ImageToLoad = new Image(); 
    imageToLoad.onload = function() { 
     console.log("finish loading"); 
    };   
    imageToLoad.src = "myimage.png"; 
}

該做的工作：

你撥打電話，確保通話不前發生之前

var ImageToLoad = new Image(); 
    function loadImage() { 
    imageToLoad.onload = function() { 
     console.log("finish loading"); 
    };   
    imageToLoad.src = "myimage.png"; 
}

來源

2016-04-16 06:36:34 Julian

請注意您的變量名稱在這裏有不同的情況 – 2016-11-09 08:22:37

圖像，onload事件不在鉻中工作

回答

相關問題