gọi lại jquery sau khi tất cả ảnh trong dom được tải?

Question

Tôi làm cách nào để kích hoạt sự kiện khi tất cả hình ảnh trong DOM được tải? Tôi đã googled rất nhiều. Tôi đã tìm thấy điều này, nhưng nó dường như không làm việc:

jQuery event for images loaded

Answer 1

Sử dụng phương pháp load()^(docs) so với window.

$(window).load(function() { 
    // this will fire after the entire page is loaded, including images 
}); 

Hoặc chỉ cần thực hiện trực tiếp qua window.onload.

window.onload = function() { 
    // this will fire after the entire page is loaded, including images 
}; 

---

Nếu bạn muốn có một sự kiện riêng biệt để bắn cho mỗi hình ảnh, đặt một .load() trên mỗi hình ảnh.

$(function() { 
    $('img').one('load',function() { 
     // fire when image loads 
    }); 
}); 

Hoặc nếu có một cơ hội một hình ảnh có thể được lưu trữ, làm điều này:

$(function() { 
    function imageLoaded() { 
     // function to invoke for loaded image 
    } 
    $('img').each(function() { 
     if(this.complete) { 
      imageLoaded.call(this); 
     } else { 
      $(this).one('load', imageLoaded); 
     } 
    }); 
}); 

---

EDIT:

Để thực hiện một số hành động sau khi tải hình ảnh cuối cùng , sử dụng bộ đếm tại tổng số hình ảnh và giảm mỗi lần trình xử lý tải được gọi.

Khi đạt đến số 0, hãy chạy một số mã khác.

$(function() { 
    function imageLoaded() { 
     // function to invoke for loaded image 
     // decrement the counter 
     counter--; 
     if(counter === 0) { 
      // counter is 0 which means the last 
      // one loaded, so do something else 
     } 
    } 
    var images = $('img'); 
    var counter = images.length; // initialize the counter 

    images.each(function() { 
     if(this.complete) { 
      imageLoaded.call(this); 
     } else { 
      $(this).one('load', imageLoaded); 
     } 
    }); 
}); 

Answer 2

Một vấn đề mà tôi gặp phải với giải pháp đã chỉnh sửa của người dùng11 là một hình ảnh bị hỏng sẽ giữ bộ đếm không bao giờ đạt đến 0. Điều này đã khắc phục sự cố cho tôi.

.error(function(){ 
    imageLoaded(); 
    $(this).hide(); 
}); 

Answer 3

Dưới đây là những gì tôi đã đưa ra, sử dụng hoãn đối tượng và $.when thay vì sử dụng một bộ đếm.

var deferreds = []; 
$('img').each(function() { 
    if (!this.complete) { 
     var deferred = $.Deferred(); 
     $(this).one('load', deferred.resolve); 
     deferreds.push(deferred); 
    } 
}); 
$.when.apply($, deferreds).done(function() { 
    /* things to do when all images loaded */ 
}); 

Hãy cho tôi biết nếu có bất kỳ cảnh báo nào.