Javascript/Jquery · Cek Bila Latar Gambar Telah Termuat

Published by Concept Phone Sabtu, 27 Oktober 2018

Lakukan sesuatu jikalau latar gambar pada elemen #test-bg telah termuat.

Tidak ada fungsi bawaan khusus yang dapat dipakai untuk mengecek bahwa sebuah latar gambar telah termuat. Tetapi Anda dapat melaksanakan itu dengan cara mengambil URL latar gambar pada elemen yang Anda inginkan untuk Anda sisipkan ke dalam atribut src gambar palsu yang Anda buat melalui JavaScript. Mengapa gambar? Karena kita dapat mendeteksi event onload pada gambar:

JavaScript Mentah

function getBgUrl(el) {     var bg = "";     if (el.currentStyle) { // IE         bg = el.currentStyle.backgroundImage;     } else if (document.defaultView && document.defaultView.getComputedStyle) { // Firefox         bg = document.defaultView.getComputedStyle(el, "").backgroundImage;     } else { // try and get inline style         bg = el.style.backgroundImage;     }     return bg.replace(/url\(['"]?(.*?)['"]?\)/i, "$1"); }  var image = document.createElement('img'); image.src = getBgUrl(document.getElementById('test-bg')); image.onload = function() {     alert('Loaded!'); // Test! };

jQuery

var bg = $('#test-bg').css('background-image').replace(/url\(['"]?(.*?)['"]?\)/i, "$1"); $('<img />').attr('src', bg).on("load", function() {     alert('Loaded!'); // Test! });

Lihat Demo

---

Referensi: SO - How Can I Check if a Background Image is Loaded?

Sumber https://www.dte.web.id/