sự kiện jQuery cho hình ảnh được tải

Có thể phát hiện khi tất cả hình ảnh được tải qua sự kiện jQuery không?

Tốt nhất, nên có một

$(document).idle(function()
{
}

hoặc là

$(document).contentLoaded(function()
{
}

Nhưng tôi không thể tìm thấy một thứ như vậy.

Tôi đã nghĩ đến việc đính kèm một sự kiện như thế này:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

Nhưng liệu điều này có bị phá vỡ nếu một hình ảnh không tải được không? Điều cực kỳ quan trọng là phương thức được gọi và vào đúng thời điểm.

Theo tài liệu của jQuery , có một số lưu ý khi sử dụng sự kiện tải với hình ảnh. Như đã lưu ý trong một câu trả lời khác, plugin ahpi.imgload.js đã bị hỏng, nhưng ý chính của Paul Ireland được liên kết không còn được duy trì.

Theo Paul Irish, plugin chuẩn để phát hiện các sự kiện tải hình ảnh hoàn thành hiện có tại:

https://github.com/desandro/imagesloaded

Nếu bạn muốn kiểm tra không phải tất cả các hình ảnh mà là một hình ảnh cụ thể (ví dụ: hình ảnh mà bạn đã thay thế động sau khi DOM đã hoàn thành), bạn có thể sử dụng điều này:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

Bạn có thể sử dụng plugin waitForImages của tôi để xử lý việc này ...

$(document).waitForImages(function() {
   // Loaded.
});

Ưu điểm của điều này là bạn có thể bản địa hóa nó thành một phần tử tổ tiên và nó có thể tùy chọn phát hiện các hình ảnh được tham chiếu trong CSS.

Tuy nhiên, đây chỉ là phần nổi của tảng băng chìm, hãy kiểm tra tài liệu để biết thêm chức năng.

Việc sử dụng jQuery $ (). Load () làm trình xử lý sự kiện IMG không được đảm bảo. Nếu hình ảnh tải từ bộ nhớ cache, một số trình duyệt có thể không kích hoạt sự kiện. Trong trường hợp phiên bản Safari (cũ hơn?), Nếu bạn đã thay đổi thuộc tính SRC của phần tử IMG thành cùng một giá trị , thì sự kiện tải lên sẽ KHÔNG kích hoạt.

Có vẻ như điều này đã được công nhận trong jQuery (1.4.x) mới nhất - http://api.jquery.com/load-event - để trích dẫn:

Có thể sự kiện tải sẽ không được kích hoạt nếu hình ảnh được tải từ bộ nhớ cache của trình duyệt. Để giải thích khả năng này, chúng tôi có thể sử dụng sự kiện tải đặc biệt sẽ kích hoạt ngay lập tức nếu hình ảnh đã sẵn sàng. event.special.load hiện có sẵn dưới dạng plugin.

Hiện có một trình cắm để nhận dạng trường hợp này và thuộc tính "hoàn chỉnh" của IE cho trạng thái tải phần tử IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Theo câu trả lời này , bạn có thể sử dụng sự kiện tải jQuery trên windowđối tượng thay vì document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

Điều này sẽ được kích hoạt sau khi tất cả nội dung trên trang đã được tải xong. Điều này khác với jQuery(document).load(...)điều này được kích hoạt sau khi DOM tải xong.

imagesLoaded Plugin là cách để bắt đầu, nếu bạn cần một giải pháp trình duyệt chéo

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

Nếu bạn chỉ cần một Giải pháp Thay thế IE, Điều này Sẽ Làm được

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

Có một ghi chú trên plugin ahpi.imgload.js vào lúc này nói rằng nó hiện đang bị hỏng và để thử ý chính này thay thế: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Đối với hình ảnh có cùng nguồn gốc, bạn có thể sử dụng:

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

có thể plugin này có thể hữu ích: http://www.farinspace.com/jquery-image-preload-plugin/

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

Tôi đã tạo tập lệnh của riêng mình, vì tôi thấy nhiều plugin khá cồng kềnh và tôi chỉ muốn nó hoạt động theo cách tôi muốn. Tôi sẽ kiểm tra xem mỗi hình ảnh có chiều cao hay không (chiều cao hình ảnh gốc). Tôi đã kết hợp nó với hàm $ (window) .load () để giải quyết các vấn đề về bộ nhớ đệm.

Tôi đã nhận xét nó khá nhiều mã, vì vậy nó sẽ rất thú vị khi xem xét, ngay cả khi bạn không sử dụng nó. Nó hoạt động hoàn hảo cho tôi.

Không cần quảng cáo thêm, đây là:

Tập lệnh imgLoad.js

Đang đợi tất cả các hình ảnh tải ...
Tôi đã tìm thấy trình khắc phục sự cố của tôi với jfriend00 tại đây jquery: làm thế nào để lắng nghe sự kiện tải hình ảnh của một div container? .. và "if (this.complete)"
Đang đợi tất cả mọi thứ tải và một số có thể trong bộ nhớ cache! .. và tôi đã thêm sự kiện "error" ... nó rất mạnh trên tất cả các trình duyệt

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

Demo: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

Nó được hỗ trợ đầy đủ bởi tất cả các trình duyệt và nó sẽ kích hoạt một sự kiện khi tất cả hình ảnh được tải đầy đủ.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload