jQuery เหตุการณ์สำหรับรูปภาพที่โหลด

เป็นไปได้หรือไม่ที่จะตรวจจับเมื่อรูปภาพทั้งหมดถูกโหลดผ่านเหตุการณ์ jQuery

ตามหลักการแล้วควรมีไฟล์

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

หรือ

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

แต่ฉันไม่พบสิ่งนั้น

ฉันคิดว่าจะแนบเหตุการณ์เช่นนี้:

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

แต่จะพังหรือไม่หากโหลดรูปภาพไม่สำเร็จ การเรียกวิธีการนี้มีความสำคัญอย่างยิ่งและในเวลาที่เหมาะสม

ตามเอกสารประกอบของ jQuery มีข้อควรระวังหลายประการสำหรับการใช้เหตุการณ์โหลดกับรูปภาพ ตามที่ระบุไว้ในคำตอบอื่นปลั๊กอิน ahpi.imgload.js ใช้งานไม่ได้ แต่ส่วนสำคัญของ Paul Irish ที่เชื่อมโยงจะไม่ได้รับการดูแลอีกต่อไป

ตาม Paul Irish ปลั๊กอิน Canonical สำหรับตรวจจับเหตุการณ์ที่สมบูรณ์ในการโหลดรูปภาพอยู่ที่:

https://github.com/desandro/imagesloaded

หากคุณต้องการตรวจสอบภาพไม่ใช่ทั้งหมด แต่เป็นภาพที่เฉพาะเจาะจง (เช่นภาพที่คุณแทนที่แบบไดนามิกหลังจาก DOM เสร็จสมบูรณ์แล้ว) คุณสามารถใช้สิ่งนี้:

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

คุณสามารถใช้ปลั๊กอินของฉันwaitForImagesเพื่อจัดการสิ่งนี้ ...

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

ข้อดีของสิ่งนี้คือคุณสามารถแปลเป็นองค์ประกอบบรรพบุรุษเดียวและสามารถเลือกที่จะตรวจจับภาพที่อ้างถึงใน CSS

นี่เป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็งโปรดตรวจสอบเอกสารสำหรับฟังก์ชันการทำงานเพิ่มเติม

ไม่รับประกันการใช้ jQuery $ (). load () เป็นตัวจัดการเหตุการณ์ IMG หากรูปภาพโหลดจากแคชเบราว์เซอร์บางตัวอาจไม่ปิดเหตุการณ์ ในกรณีของ Safari เวอร์ชัน (เก่ากว่า?) หากคุณเปลี่ยนคุณสมบัติ SRC ขององค์ประกอบ IMG เป็นค่าเดียวกันเหตุการณ์ onload จะไม่เริ่มทำงาน

ดูเหมือนว่าสิ่งนี้เป็นที่รู้จักใน jQuery ล่าสุด (1.4.x) - http://api.jquery.com/load-event - เพื่ออ้างอิง:

เป็นไปได้ว่าเหตุการณ์การโหลดจะไม่ถูกทริกเกอร์หากรูปภาพถูกโหลดจากแคชของเบราว์เซอร์ เพื่ออธิบายถึงความเป็นไปได้นี้เราสามารถใช้เหตุการณ์โหลดพิเศษที่จะเริ่มทำงานทันทีหากภาพพร้อม ปัจจุบัน event.special.load มีให้ใช้งานเป็นปลั๊กอิน

ตอนนี้มีปลั๊กอินสำหรับจดจำกรณีนี้และคุณสมบัติ "สมบูรณ์" ของ IE สำหรับสถานะโหลดองค์ประกอบ IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

ตามคำตอบนี้คุณสามารถใช้jQuery load eventบนwindowออบเจ็กต์แทนdocument:

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

สิ่งนี้จะถูกทริกเกอร์หลังจากโหลดเนื้อหาทั้งหมดในเพจแล้ว สิ่งนี้แตกต่างจากjQuery(document).load(...)ที่เกิดขึ้นหลังจากโหลด DOM เสร็จแล้ว

imagesLoaded Plugin เป็นวิธีที่จะไปหากคุณต้องการโซลูชัน crossbrowser

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

หากคุณต้องการ IE WorkAround สิ่งนี้จะทำ

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

มีหมายเหตุเกี่ยวกับปลั๊กอิน ahpi.imgload.js ในขณะนี้โดยแจ้งว่าขณะนี้ใช้งานไม่ได้และลองใช้ส่วนสำคัญนี้แทน: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

สำหรับภาพต้นกำเนิดเดียวกันคุณสามารถใช้:

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

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

บางทีปลั๊กอินนี้อาจมีประโยชน์: 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

}); 

ฉันสร้างสคริปต์ของตัวเองเพราะฉันพบว่าปลั๊กอินจำนวนมากค่อนข้างบวมและฉันแค่อยากให้มันทำงานในแบบที่ฉันต้องการ เหมืองจะตรวจสอบว่าแต่ละภาพมีความสูงหรือไม่ (ความสูงของภาพดั้งเดิม) ฉันได้รวมมันเข้ากับฟังก์ชัน $ (window) .load () เพื่อแก้ไขปัญหาการแคช

ฉันเขียนโค้ดแสดงความคิดเห็นค่อนข้างหนักดังนั้นจึงควรดูแม้ว่าคุณจะไม่ได้ใช้ก็ตาม มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

โดยไม่ต้องกังวลใจอีกต่อไปนี่คือ:

สคริปต์ imgLoad.js

กำลังรอให้รูปภาพทั้งหมดโหลด ...
ฉันพบว่า anwser มีปัญหากับ jfriend00 ที่นี่jquery: จะฟังเหตุการณ์ที่โหลดรูปภาพของคอนเทนเนอร์หนึ่งไฟล์ได้อย่างไร .. และ "if (this.complete)"
กำลังรอให้ทุกสิ่งโหลดและบางส่วนอาจอยู่ในแคช! .. และฉันได้เพิ่มเหตุการณ์ "ข้อผิดพลาด" ... มันมีประสิทธิภาพในทุกเบราว์เซอร์

$(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...
    });
});

การสาธิต: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

เบราว์เซอร์ทั้งหมดได้รับการสนับสนุนอย่างเต็มที่และจะเริ่มเหตุการณ์เมื่อรูปภาพทั้งหมดโหลดจนเต็ม

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