ตรวจสอบว่าภาพถูกโหลด (ไม่มีข้อผิดพลาด) ด้วย jQuery

ฉันใช้จาวาสคริปต์กับไลบรารี่ jQuery เพื่อจัดการภาพขนาดย่อของรูปภาพที่อยู่ในรายการที่ไม่ได้เรียงลำดับ เมื่อโหลดภาพมันจะทำสิ่งหนึ่งเมื่อเกิดข้อผิดพลาดมันจะทำอย่างอื่น ฉันใช้ jQuery load()และerror()วิธีการเป็นกิจกรรม หลังจากเหตุการณ์เหล่านี้ฉันตรวจสอบองค์ประกอบภาพ DOM สำหรับ. complete เพื่อให้แน่ใจว่าภาพไม่ได้โหลดไว้แล้วก่อนที่ jQuery จะสามารถลงทะเบียนเหตุการณ์ได้

มันทำงานได้อย่างถูกต้องยกเว้นเมื่อเกิดข้อผิดพลาดก่อน jQuery สามารถลงทะเบียนเหตุการณ์ ทางออกเดียวที่ฉันคิดได้คือใช้onerrorแอตทริบิวต์img เพื่อเก็บ "ค่าสถานะ" ไว้ที่ใดที่หนึ่งทั่วโลก (หรือบนโหนดเป็นของตนเอง) ที่ระบุว่าล้มเหลวดังนั้น jQuery สามารถตรวจสอบว่า "ร้านค้า / โหนด" เมื่อตรวจสอบ .complete

ใครมีทางออกที่ดีกว่า

แก้ไข: จุดแข็งหลักและเพิ่มรายละเอียดพิเศษด้านล่าง: ฉันกำลังตรวจสอบว่าภาพเสร็จสมบูรณ์ (โหลดแล้วหรือยัง) หลังจากฉันเพิ่มเหตุการณ์การโหลดและข้อผิดพลาดบนภาพ ด้วยวิธีนี้ถ้าภาพถูกโหลดก่อนที่เหตุการณ์จะลงทะเบียนฉันจะยังคงรู้ หากภาพไม่ได้โหลดหลังจากเหตุการณ์เหตุการณ์จะดูแลเมื่อทำ ปัญหาเกี่ยวกับสิ่งนี้คือฉันสามารถตรวจสอบได้อย่างง่ายดายว่าภาพถูกโหลดไปแล้ว แต่ฉันไม่สามารถบอกได้ว่ามีข้อผิดพลาดเกิดขึ้นแทนหรือไม่

อีกทางเลือกหนึ่งคือการทริกเกอร์onloadและ / หรือonerrorเหตุการณ์โดยการสร้างองค์ประกอบภาพในหน่วยความจำและการตั้งค่าsrcคุณลักษณะของมันเป็นคุณลักษณะดั้งเดิมsrcของภาพต้นฉบับ นี่คือตัวอย่างของสิ่งที่ฉันหมายถึง:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

หวังว่านี่จะช่วยได้!

ตรวจสอบcompleteและnaturalWidthคุณสมบัติตามลำดับ

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

จากความเข้าใจของฉันเกี่ยวกับข้อกำหนด W3C HTML สำหรับimgองค์ประกอบคุณควรสามารถทำได้โดยใช้การรวมกันของcompleteและnaturalHeightคุณลักษณะดังนี้:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

จากข้อมูลจำเพาะสำหรับcompleteแอตทริบิวต์:

แอตทริบิวต์ IDL ที่สมบูรณ์ต้องส่งคืนจริงหากเงื่อนไขใด ๆ ต่อไปนี้เป็นจริง:

• แอตทริบิวต์ src ถูกละไว้
• งานสุดท้ายที่เข้าคิวโดยแหล่งงานเครือข่ายเมื่อทรัพยากรถูกดึงมาได้รับการจัดคิว
• องค์ประกอบ img พร้อมใช้งานอย่างสมบูรณ์
• องค์ประกอบ img เสียหาย

มิฉะนั้นแอตทริบิวต์จะต้องส่งคืนค่าเท็จ

ดังนั้นcompleteจริง ๆแล้วคืนค่าเป็นจริงถ้าภาพโหลดเสร็จหรือโหลดไม่สำเร็จ เนื่องจากเราต้องการเฉพาะกรณีที่โหลดรูปภาพสำเร็จเราจึงต้องตรวจสอบnauturalHeightคุณสมบัติเช่นกัน:

แอ็ตทริบิวต์ IDL naturalWidthและnaturalHeightต้องส่งคืนความกว้างและความสูงที่แท้จริงของรูปภาพเป็นพิกเซล CSS หากรูปภาพพร้อมใช้งานหรืออย่างอื่น 0

และavailableถูกกำหนดเช่นนั้น:

img อยู่ในสถานะใดสถานะหนึ่งต่อไปนี้:

• ไม่พร้อมใช้งาน - ตัวแทนผู้ใช้ไม่ได้รับข้อมูลภาพใด ๆ
• พร้อมใช้งานบางส่วน - ตัวแทนผู้ใช้ได้รับข้อมูลภาพบางส่วนแล้ว
• พร้อมใช้งานโดยสมบูรณ์ - เอเจนต์ผู้ใช้ได้รับข้อมูลภาพทั้งหมดและอย่างน้อยก็มีขนาดภาพ
• แตก - ตัวแทนผู้ใช้ได้รับข้อมูลภาพทั้งหมดที่สามารถทำได้ แต่ไม่สามารถถอดรหัสภาพได้เพียงพอที่จะรับขนาดภาพ (เช่นภาพเสียหายหรือไม่รองรับรูปแบบหรือไม่สามารถรับข้อมูลได้) .

เมื่อองค์ประกอบ img อยู่ในสถานะพร้อมใช้งานบางส่วนหรืออยู่ในสถานะพร้อมใช้งานทั้งหมดจะถูกกล่าวว่าพร้อมใช้งาน

ดังนั้นหากภาพ "เสีย" (โหลดไม่สำเร็จ) ภาพนั้นจะอยู่ในสถานะไม่ใช้งานไม่ใช่สถานะที่ใช้งานได้ดังนั้นnaturalHeightจะเป็น 0

ดังนั้นการตรวจสอบimgElement.complete && imgElement.naturalHeight !== 0ควรบอกเราว่าโหลดภาพสำเร็จหรือไม่

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ในข้อกำหนดของ W3C HTML สำหรับimgองค์ประกอบหรือบน MDN

ฉันลองหลายวิธีและวิธีนี้เป็นวิธีเดียวที่เหมาะกับฉัน

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

นอกจากนี้คุณยังสามารถเพิ่มฟังก์ชั่นการโทรกลับเมื่อมีการโหลดภาพทั้งหมดใน DOM และพร้อม ใช้สำหรับรูปภาพที่เพิ่มแบบไดนามิกด้วย http://jsfiddle.net/kalmarsh80/nrAPk/

การใช้งานจาวาสคริปต์ห้องสมุดimagesLoaded

ใช้งานได้กับ Javascript ธรรมดาและเป็นปลั๊กอิน jQuery

คุณสมบัติ:

• สนับสนุนอย่างเป็นทางการโดย IE8 +
• ใบอนุญาต: MIT
• การพึ่งพา: ไม่มี
• น้ำหนัก (ลดขนาด & gzipped): 7kb ลดขนาด (แสง!)

ทรัพยากร

• โครงการบน github: https://github.com/desandro/imagesloaded
• เว็บไซต์ทางการ: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• ไลบรารี javascript imagesloaded: เบราว์เซอร์และอุปกรณ์รองรับคืออะไร

ดึงข้อมูลจากองค์ประกอบภาพในหน้า
ทดสอบการทำงานกับ Chrome และ Firefox
ทำงานjsFiddle (เปิดคอนโซลของคุณเพื่อดูผลลัพธ์)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

หมายเหตุ: ฉันใช้jQueryฉันคิดว่านี่น่าจะเป็นจาวาสคริปต์ที่สมบูรณ์

ฉันหาข้อมูลที่ดีได้ที่นี่OpenClassRoom -> นี่คือฟอรัมฝรั่งเศส

เครื่องตรวจจับเครือข่ายเรียลไทม์ - ตรวจสอบสถานะเครือข่ายโดยไม่ต้องรีเฟรชหน้าเว็บ: (ไม่ใช่ jquery, แต่ผ่านการทดสอบและทำงานได้ 100%: (ทดสอบบน Firefox v25.0))

รหัส:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

หากการเชื่อมต่อขาดหายให้กดปุ่มอีกครั้ง

อัปเดต 1: ตรวจจับอัตโนมัติโดยไม่ต้องรีเฟรชหน้า:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

หลังจากอ่านวิธีแก้ปัญหาที่น่าสนใจในหน้านี้แล้วฉันได้สร้างโซลูชันที่ใช้งานง่ายซึ่งได้รับอิทธิพลอย่างมากจากโพสต์ของ SLaks และ Noyo ที่ดูเหมือนว่าจะใช้งานได้กับเวอร์ชันล่าสุด (เช่นเขียน) ของ Chrome, IE, Firefox, Safari และ Opera (ทั้งหมดบน Windows) นอกจากนี้มันยังทำงานบนอีมูเลเตอร์ iPhone / iPad ที่ฉันใช้

ข้อแตกต่างที่สำคัญอย่างหนึ่งระหว่างโซลูชันนี้กับ SLaks และโพสต์ของ Noyo คือโซลูชันนี้จะตรวจสอบคุณสมบัติความกว้างตามธรรมชาติและความสูงตามธรรมชาติ ฉันพบว่าในเวอร์ชันเบราว์เซอร์ปัจจุบันคุณสมบัติทั้งสองนั้นดูเหมือนจะให้ผลลัพธ์ที่เป็นประโยชน์และสอดคล้องกันมากที่สุด

รหัสนี้จะคืนค่า TRUE เมื่อรูปภาพโหลดเต็มและสำเร็จ มันจะคืนค่า FALSE เมื่อรูปภาพยังไม่โหลดเต็มหรือยังไม่สามารถโหลดได้

สิ่งหนึ่งที่คุณต้องระวังก็คือฟังก์ชั่นนี้จะคืนค่า FALSE หากภาพนั้นเป็นภาพขนาด 0x0 พิกเซล แต่ภาพเหล่านั้นค่อนข้างแปลกและฉันไม่สามารถนึกถึงกรณีที่มีประโยชน์มากที่คุณต้องการตรวจสอบเพื่อดูว่าภาพพิกเซล 0x0 โหลดหรือยัง :)

ก่อนอื่นเราจะแนบฟังก์ชั่นใหม่ที่ชื่อว่า "isLoaded" เข้ากับต้นแบบ HTMLImageElement เพื่อให้สามารถใช้ฟังก์ชั่นนี้กับองค์ประกอบภาพใด ๆ

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

จากนั้นเมื่อใดก็ตามที่เราต้องการตรวจสอบสถานะการโหลดของภาพเราก็เรียกฟังก์ชั่น "isLoaded"

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

ตามความเห็นของ giorgian เกี่ยวกับ SLaks 'และโพสต์ของ Noyo โซลูชันนี้อาจใช้เพื่อตรวจสอบ Safari มือถือแบบครั้งเดียวเท่านั้นหากคุณวางแผนที่จะเปลี่ยนแอตทริบิวต์ SRC แต่คุณสามารถแก้ไขได้โดยการสร้างองค์ประกอบรูปภาพด้วยแอตทริบิวต์ SRC ใหม่แทนการเปลี่ยนแอตทริบิวต์ SRC ในองค์ประกอบรูปภาพที่มีอยู่

นี่คือวิธีที่ฉันได้มันไปทำงานข้ามเบราว์เซอร์โดยใช้วิธีการข้างต้นรวมกัน (ฉันยังต้องแทรกภาพแบบไดนามิกใน Dom):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

หมายเหตุ: คุณจะต้องระบุสถานะบูลีนที่ถูกต้องสำหรับตัวแปร isIE

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// หรือเป็นปลั๊กอิน

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

เนื่องจากฉันเข้าใจว่าคุณสมบัติ complete นั้นไม่ได้มาตรฐาน อาจไม่เป็นสากล ... ฉันสังเกตว่าดูเหมือนว่าจะทำงานแตกต่างกันใน Firefox กับ IE ฉันกำลังโหลดภาพจำนวนหนึ่งในจาวาสคริปต์แล้วตรวจสอบว่าเสร็จสมบูรณ์หรือไม่ ใน Firefox ดูเหมือนว่าจะใช้งานได้ดี ใน IE มันไม่ได้เป็นเพราะภาพดูเหมือนว่าจะโหลดในหัวข้ออื่น มันใช้งานได้ก็ต่อเมื่อฉันหน่วงเวลาระหว่างการกำหนดให้กับ image.src และเมื่อฉันตรวจสอบคุณสมบัติ image.complete

การใช้ image.onload และ image.onerror ไม่ทำงานสำหรับฉันเช่นกันเพราะฉันต้องผ่านพารามิเตอร์เพื่อทราบว่าฉันกำลังพูดถึงภาพใดเมื่อฟังก์ชั่นถูกเรียกใช้ วิธีการใด ๆ ที่ดูเหมือนว่าจะล้มเหลวเพราะจริง ๆ แล้วดูเหมือนว่าจะส่งผ่านฟังก์ชันเดียวกันไม่ใช่อินสแตนซ์ที่แตกต่างกันของฟังก์ชันเดียวกัน ดังนั้นค่าที่ฉันส่งเข้ามาเพื่อระบุภาพจะกลายเป็นค่าสุดท้ายในลูปเสมอ ฉันไม่สามารถคิดถึงปัญหานี้ได้

บน Safari และ Chrome ฉันเห็น image.complete จริงและ naturalWidth ตั้งไว้แม้เมื่อคอนโซลข้อผิดพลาดแสดง 404 สำหรับภาพนั้น ... และฉันตั้งใจลบภาพนั้นเพื่อทดสอบ แต่ข้างต้นทำงานได้ดีสำหรับ Firefox และ IE

ตัวอย่างรหัสนี้ช่วยให้ฉันแก้ไขปัญหาการแคชเบราว์เซอร์:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

เมื่อแคชเบราว์เซอร์ถูกปิดใช้งานเฉพาะรหัสนี้ไม่ทำงาน:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

เพื่อให้มันทำงานคุณต้องเพิ่ม:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

ใช้JavaScriptรหัสนี้คุณสามารถตรวจสอบภาพที่โหลดได้สำเร็จหรือไม่

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

ลองสิ่งนี้

ฉันมีปัญหามากมายกับการโหลดรูปภาพและ EventListener

สิ่งที่ฉันพยายามผลลัพธ์ไม่น่าเชื่อถือ

แต่แล้วฉันก็พบทางออก มันไม่ใช่เทคนิคที่ดี แต่ตอนนี้ฉันไม่เคยโหลดภาพที่ล้มเหลว

ฉันทำอะไรลงไป:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

แทนที่จะโหลดภาพหนึ่งครั้งฉันเพียงแค่โหลดมันเป็นครั้งที่สองโดยตรงหลังจากครั้งแรกและทั้งคู่ก็รันโปรแกรมจัดการเหตุการณ์

อาการปวดหัวของฉันหมดไป!

โดยวิธีการ: พวกคุณจาก stackoverflow ช่วยฉันได้มากกว่าร้อยเท่าแล้ว สำหรับเรื่องนี้ใหญ่มากขอบคุณ!

อันนี้ใช้ได้ดีสำหรับฉัน :)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});