image.onload cháy trước khi hình ảnh được tải hoàn toàn

Question

Tôi đang tạo trò chơi bằng cách sử dụng javascript + canvas. Tôi sử dụng mã bên dưới để đảm bảo

var imgLoaded = 0; 
var imgToLoad = multiImgs; 
var onImgLoad = function() 
{ 
    imgLoaded++; 
    if(imgLoaded == imgToLoad) 
    { 
     ctx.drawImage() 
    } 
} 

for(var i = 0; i < multiImgs; i++) 
{ 
    images[i] = new Image(); 
    images[i].onload = onImgLoad(); 
    images[i].src = 'images/'+i+'.png'; 
} 

Mã này đôi khi hoạt động tốt, đặc biệt. khi hình ảnh được lưu vào bộ nhớ cache. Tuy nhiên, khi tải lần đầu tiên, đôi khi, nó cho INDEX_SIZE_ERR: Ngoại lệ DOM 1 mà tôi thấy là do chiều cao & chiều rộng của hình ảnh không có sẵn theo đề xuất của Quickredfox trong answer ... nhưng sau đó tại đây drawImage được gọi là chỉ khi tất cả các hình ảnh được tải? Lỗi chủ yếu xảy ra trong thiết bị di động

Answer 1

Bạn phải cung cấp tài liệu tham chiếu cho trình xử lý tải. Nếu không, hàm sẽ thực thi ngay lập tức. Sử dụng:

images[i].onload = onImgLoad;