Periksa apakah gambar dimuat (tidak ada kesalahan) dengan jQuery

Saya menggunakan JavaScript dengan pustaka jQuery untuk memanipulasi gambar mini gambar yang terdapat dalam daftar tidak berurutan. Ketika gambar dimuat itu melakukan satu hal, ketika kesalahan terjadi itu melakukan sesuatu yang lain. Saya menggunakan jQuery load()dan error()metode sebagai acara. Setelah peristiwa ini, saya memeriksa elemen DOM gambar untuk .complete untuk memastikan gambar belum dimuat sebelum jQuery bisa mendaftarkan acara.

Ini berfungsi dengan benar kecuali ketika kesalahan terjadi sebelum jQuery dapat mendaftarkan acara. Satu-satunya solusi yang dapat saya pikirkan adalah dengan menggunakan onerroratribut img untuk menyimpan "flag" di suatu tempat secara global (atau pada node itu sendiri) yang mengatakan itu gagal sehingga jQuery dapat memeriksa "store / node" itu ketika memeriksa .complete.

Adakah yang punya solusi yang lebih baik?

Sunting: Poin utama yang dicetak tebal dan menambahkan detail ekstra di bawah: Saya memeriksa apakah gambar sudah selesai (alias dimuat) SETELAH saya menambahkan acara memuat dan kesalahan pada gambar. Dengan begitu, jika gambar dimuat sebelum acara didaftarkan, saya akan tetap tahu. Jika gambar tidak dimuat setelah acara maka acara akan mengurusnya ketika itu terjadi. Masalahnya adalah, saya dapat dengan mudah memeriksa apakah suatu gambar sudah dimuat, tetapi saya tidak bisa memastikan apakah ada kesalahan yang terjadi.

Pilihan lain adalah untuk memicu onloaddan / atau onerrorperistiwa dengan membuat elemen gambar dalam memori dan mengatur srcatributnya ke srcatribut asli dari gambar asli. Berikut ini contoh yang saya maksud:

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

Semoga ini membantu!

Periksa completedan naturalWidthproperti, dalam urutan itu.

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;
}

Berdasarkan pemahaman saya tentang Spesifikasi HTML W3C untuk imgelemen , Anda harus dapat melakukan ini menggunakan kombinasi atribut completedan naturalHeight, seperti:

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

Dari spec untuk completeatribut:

Atribut IDL selesai harus mengembalikan true jika salah satu dari kondisi berikut ini benar:

• Atribut src dihilangkan.
• Tugas terakhir yang di-antri oleh sumber tugas jaringan setelah sumber daya diambil telah di-antri.
• Elemen img sepenuhnya tersedia.
• Elemen img rusak.

Jika tidak, atribut harus mengembalikan false.

Jadi pada dasarnya, completemengembalikan true jika gambar telah selesai memuat, atau gagal memuat. Karena kita hanya menginginkan case di mana gambar berhasil dimuat, kita perlu memeriksa nauturalHeightatributnya juga:

IDL mengaitkan naturalWidthdan naturalHeightharus mengembalikan lebar dan tinggi intrinsik gambar, dalam piksel CSS, jika gambar tersedia, atau 0.

Dan availabledidefinisikan seperti ini:

Seorang img selalu berada di salah satu negara berikut:

• Tidak tersedia - Agen pengguna belum mendapatkan data gambar apa pun.
• Tersedia sebagian - Agen pengguna telah memperoleh beberapa data gambar.
• Tersedia sepenuhnya - Agen pengguna telah memperoleh semua data gambar dan setidaknya dimensi gambar tersedia.
• Rusak - Agen pengguna telah memperoleh semua data gambar yang dapat, tetapi bahkan tidak dapat mendekode gambar cukup untuk mendapatkan dimensi gambar (misalnya gambar rusak, atau format tidak didukung, atau tidak ada data yang bisa diperoleh) .

Ketika elemen img baik dalam kondisi sebagian tersedia atau dalam kondisi sepenuhnya tersedia, dikatakan tersedia.

Jadi jika gambar "rusak" (gagal dimuat), maka gambar itu akan dalam keadaan rusak, bukan keadaan yang tersedia, jadi naturalHeightakan menjadi 0.

Karena itu, pengecekan imgElement.complete && imgElement.naturalHeight !== 0harus memberi tahu kami apakah gambar telah berhasil dimuat.

Anda dapat membaca lebih lanjut tentang ini di Spesifikasi HTML W3C untuk imgelemen , atau di MDN .

Saya mencoba berbagai cara dan cara ini adalah satu-satunya yang berhasil untuk saya

//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');
});

Anda juga dapat menambahkan fungsi panggilan balik yang dipicu setelah semua gambar dimuat di DOM dan siap. Ini berlaku untuk gambar yang ditambahkan secara dinamis juga. http://jsfiddle.net/kalmarsh80/nrAPk/

Gunakan imagesLoadedperpustakaan javascript .

Dapat digunakan dengan Javascript biasa dan sebagai plugin jQuery.

Fitur:

• secara resmi didukung oleh IE8 +
• lisensi: MIT
• dependensi: tidak ada
• berat (minified & gzipped): 7kb minified (ringan!)

Sumber daya

• Proyeksikan di github: https://github.com/desandro/imagesloaded
• Situs web resmi: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded perpustakaan javascript: apa yang didukung browser & perangkat?

Ambil informasi dari elemen gambar di halaman.
Tes bekerja di Chrome dan Firefox.
Bekerja jsFiddle (buka konsol Anda untuk melihat hasilnya)

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

});

Catatan: Saya menggunakan jQuery , saya pikir ini dapat mencapai javascript penuh

Saya menemukan informasi yang bagus di sini OpenClassRoom -> ini adalah forum Perancis

Detektor jaringan waktu nyata - periksa status jaringan tanpa menyegarkan halaman: (ini bukan jquery, tetapi diuji, dan 100% berfungsi: (diuji pada Firefox v25.0))

Kode:

<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>

jika koneksi terputus cukup tekan tombol Lagi.

Pembaruan 1: Deteksi otomatis tanpa menyegarkan halaman:

<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>

Setelah membaca solusi menarik di halaman ini, saya membuat solusi yang mudah digunakan yang sangat dipengaruhi oleh pos SLaks dan Noyo yang tampaknya bekerja pada versi terbaru (saat penulisan) Chrome, IE, Firefox, Safari, dan Opera (semua di Windows). Juga, ini bekerja pada emulator iPhone / iPad yang saya gunakan.

Salah satu perbedaan utama antara solusi ini dan posting SLaks dan Noyo adalah bahwa solusi ini terutama memeriksa properti naturalWidth dan naturalHeight. Saya telah menemukan bahwa dalam versi browser saat ini, kedua properti tersebut tampaknya memberikan hasil yang paling bermanfaat dan konsisten.

Kode ini mengembalikan TRUE ketika gambar telah dimuat penuh DAN berhasil. Ini mengembalikan FALSE ketika gambar belum dimuat penuh ATAU gagal memuat.

Satu hal yang perlu Anda perhatikan adalah bahwa fungsi ini juga akan mengembalikan SALAH jika gambar tersebut adalah gambar 0x0 piksel. Tapi gambar-gambar itu sangat jarang, dan saya tidak bisa memikirkan kasus yang sangat berguna di mana Anda ingin memeriksa untuk melihat apakah gambar 0x0 piksel telah dimuat :)

Pertama kita lampirkan fungsi baru yang disebut "isLoaded" ke prototipe HTMLImageElement, sehingga fungsi tersebut dapat digunakan pada elemen gambar apa pun.

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;

};

Kemudian, setiap saat kita perlu memeriksa status pemuatan gambar, kita cukup memanggil fungsi "isLoaded".

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

Per komentar giorgian tentang pos SLaks dan Noyo, solusi ini mungkin hanya dapat digunakan sebagai pemeriksaan satu kali pada Safari Mobile jika Anda berencana mengubah atribut SRC. Tetapi Anda dapat mengatasinya dengan membuat elemen gambar dengan atribut SRC baru alih-alih mengubah atribut SRC pada elemen gambar yang ada.

Ini adalah bagaimana saya membuatnya bekerja lintas browser menggunakan kombinasi metode di atas (saya juga perlu memasukkan gambar secara dinamis ke dalam 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');
    }
});

Catatan: Anda harus menyediakan status boolean yang valid untuk variabel isIE.

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

// Atau Sebagai Plugin

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

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

Seperti yang saya mengerti properti .complete adalah non-standar. Ini mungkin tidak universal ... Saya melihat itu tampaknya bekerja secara berbeda di Firefox ayat IE. Saya memuat sejumlah gambar dalam javascript kemudian memeriksa apakah sudah selesai. Di Firefox, ini sepertinya bekerja dengan baik. Di IE, itu bukan karena gambar tampak memuat di utas lainnya. Ini hanya berfungsi jika saya menunda antara tugas saya ke image.src dan ketika saya memeriksa properti image.complete.

Menggunakan image.onload dan image.onerror juga tidak berfungsi untuk saya, karena saya perlu memberikan parameter untuk mengetahui gambar yang saya bicarakan ketika fungsi dipanggil. Cara apa pun yang tampaknya gagal karena sebenarnya tampaknya melewati fungsi yang sama, bukan contoh berbeda dari fungsi yang sama. Jadi nilai yang saya berikan untuk mengidentifikasi gambar selalu berakhir dengan nilai terakhir dalam loop. Saya tidak bisa memikirkan jalan keluar masalah ini.

Di Safari dan Chrome, saya melihat image.complete benar dan naturalWidth ditetapkan bahkan ketika konsol kesalahan menunjukkan 404 untuk gambar itu ... dan saya sengaja menghapus gambar itu untuk menguji ini. Tetapi hal di atas berfungsi baik untuk Firefox dan IE.

Cuplikan kode ini membantu saya memperbaiki masalah cache browser:

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

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

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

Saat cache browser dinonaktifkan, hanya kode ini yang tidak berfungsi:

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

untuk membuatnya berfungsi, Anda harus menambahkan:

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

Menggunakan JavaScriptkode ini Anda dapat memeriksa gambar berhasil dimuat atau tidak.

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

Coba ini

Saya punya banyak masalah dengan pemuatan lengkap gambar dan EventListener.

Apa pun yang saya coba, hasilnya tidak dapat diandalkan.

Tetapi kemudian saya menemukan solusinya. Secara teknis ini tidak bagus, tapi sekarang saya tidak pernah mengalami gagal memuat gambar.

Apa yang saya lakukan:

                    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");
                }

Alih-alih memuat gambar satu kali, saya hanya memuatnya langsung kedua kalinya setelah pertama kali dan keduanya berjalan melalui eventhandler.

Semua sakit kepala saya hilang!

By the way: Kalian dari stackoverflow membantu saya sudah lebih dari seratus kali. Untuk ini, terima kasih banyak!

Yang ini bekerja dengan baik untuk saya :)

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