Chặn Javascript cho đến khi quá trình tải trước hình ảnh hoàn tất?

Question

Tôi đang sử dụng javascript để tải trước một số hình ảnh với đoạn mã sau:

// do the following for each image where 'this' is the path 
(new Image()).src = this; 

này hoạt động tốt - trong firebug tôi có thể thấy mỗi hình ảnh tải về được bắn ra sau mỗi lần lặp.

Vấn đề của tôi là tôi muốn chặn cho đến khi tải xuống thực tế hoàn tất. Nói cách khác, tôi muốn hiển thị hộp thoại "tải xuống hình ảnh" cho người dùng cho đến khi tất cả hình ảnh đã tải xuống xong. Ngay bây giờ nếu tôi chỉ đơn giản hiển thị hộp thoại trước khi vòng lặp tải trước được thực thi (và xóa hộp thoại sau khi vòng lặp hoàn tất), nó chỉ cần chụp các yêu cầu tải xuống KHÔNG tải xuống thực sự hoàn tất.

Vì có vẻ như việc tải xuống thực tế không đồng bộ, có cách nào để chặn cho đến khi tất cả tải xuống đã hoàn tất không?

Answer 1

Bạn có thể sử dụng onload phương pháp được kích hoạt khi hình ảnh sẽ được tải về thành công, sau đó thiết lập bước tiếp theo của bạn trong onload chức năng.

Đây là trường W3 của tài liệu tham khảo:

http://www.w3schools.com/jsref/event_img_onload.asp

Answer 2

Bạn có thể ẩn div có nội dung bạn đang tải trước hình ảnh của mình trong khi hiển thị div "đang tải" cho đến khi quá trình tải trước hoàn tất. Nó sẽ giống như thế này:

$('#content').hide(); 
$('#loading').show(); 

// for loop loading images here 

$('#loading').hide(); 
$('#content').show(); 

Answer 3

$(function() { 
    var imgs = $('img'); 
    var length = imgs.length; 
    var loaded = 0; 
    $('img').hide().each(function() { 
     $(this).bind('load', function() { 
      if ((++loaded) === length) { 
       imgs.show(); 
      }else { 
       //show images are still downloading 
      } 
     }); 
    }); 
});