Kiểm tra xem tất cả hình ảnh được nạp

Question

Đây là nỗ lực của tôi ở khả năng kiểm tra nếu tất cả các hình ảnh được nạp:

for (var i = 0; i < imgCount; i ++) { 
    loadArr[i] = false 
    imgArr[i] = new Image() 
    imgArr[i].src='img'+i+'.png' 
    imgArr[i].onload = function() { 
     loadArr[i] = true //but wait! At the end of 
          //the loop, i is imgCount 
          //so this doesn't work. 
    } 
} 

Vấn đề là một khi vòng lặp được thực hiện, biến i là imgCount. Điều đó có nghĩa là tất cả các cờ "nạp" khác không bao giờ được đặt thành true khi hình ảnh của chúng được tải.

Có cách nào để thêm thuộc tính "được tải" vào hình ảnh không hoặc có cách nào giải quyết vấn đề này không?

Answer 1

Bạn cần phải xác định các chức năng onload sử dụng một đóng cửa:

for (var i = 0; i < imgCount; i ++) { 
    loadArr[i] = false 
    imgArr[i] = new Image() 
    imgArr[i].src='img'+i+'.png' 
    imgArr[i].onload = (function(i){ 
     return function(){ loadArr[i] = true } 
    })(i); 
} 

Dưới đây là một jsFiddle đó chứng tỏ công tác này tại một kịch bản tương tự.

Ngoài ra, lưu ý rằng giải pháp mà bạn đang chọn là câu trả lời không thực sự làm việc:

imgArr[i].onload = (function() { 
     loadArr[i] = true; 
    })(); 

Chức năng này được đánh giá ngay lập tức. Điều này có nghĩa rằng trong vòng lặp, mỗi phần tử của loadArr được đặt thành true như là sự kiện onload. mã số đó là chức năng giống với:

imgArr[i].onload = loadArr[i] = true; 

Answer 2

Bạn phải vượt qua giá trị chỉ số chức năng ẩn danh như thế này,

for (var i = 0; i < imgCount; i++) { 
    loadArr[i] = false 
    imgArr[i] = new Image() 
    imgArr[i].src = 'img' + i + '.png' 
    imgArr[i].onload = function (index) { 
     return function() { 
      loadArr[index] = true //but wait! At the end of 
      //the loop, i is imgCount 
      //so this doesn't work. 
     }; 
    }(i); 
} 

Answer 3

Đây là lý do đóng cửa đã được thực hiện! Vòng lặp của bạn chạy gần như ngay lập tức và kết thúc rất lâu trước khi hình ảnh đầu tiên được tải. Vì vậy, tôi == imgCount ngay lập tức, "bỏ qua" tất cả các giá trị khác. Đóng cửa có thể tránh điều này và ảnh hưởng đến mỗi giá trị của i đến một hình ảnh riêng biệt.

Tuy nhiên, trong trường hợp của bạn, tôi thực sự sẽ thêm thuộc tính "đã tải" vào từng hình ảnh.

// Construct your image array 
for (var i = 0; i < imgCount; i++) { 
    imgArr[i] = new Image(); 
    imgArr[i].src='img'+i+'.png'; 
} 

//Then iterate over the array, adding a 'loaded' attribute when it occurs 
imgArr.each(function(){ 
    $(this).onload(function() { 
     $(this).attr('loaded','true'); 
    }); 
}