Как с помощью JavaScript проверить, загружено ли фоновое изображение?
Опубликовано: 1 Декабря, 2021
В JavaScript событие onload используется для проверки того, загружено ли окно или нет. Точно так же мы можем использовать это событие, чтобы проверить, загружен ли конкретный элемент или нет. Есть два способа проверить, загрузилось ли фоновое изображение или нет.
Синтаксис:
Используя HTML:
<element onload = "myScript">
Использование атрибута onload в JavaScript:
object.onload = function () {myScript};Использование метода addEventListener () в JavaScript
object.addEventListener («загрузка», myScript);
HTML-подход:
HTML
<!DOCTYPE html>< html > < head > < script src = </ script > < style > #bg_img { width: 50vw; height: 50vh; } </ style ></ head > < body > < h2 >Welcome To GFG</ h2 > < p > Default code has been loaded into the Editor. </ p > < img id = "bg_img" onload = "loadImage()" /> < p id = "img_status" ></ p > < script > function loadImage() { document.getElementById("img_status") .innerHTML = "image loaded"; } document.getElementById("bg_img").src = let ele = document.getElementById("bg_img"); </ script ></ body > </ html > |
Выход:
Использование атрибута onload:
HTML
<!DOCTYPE html>< html > < head > < script src = </ script > < style > #bg_img { width: 50vw; height: 50vh; } </ style ></ head > < body > < h2 >Welcome To GFG</ h2 > < p > Default code has been loaded into the Editor. </ p > < img id = "bg_img" /> < p id = "img_status" ></ p > < script > let ele = document.getElementById("bg_img"); ele.onload = (e) => { document.getElementById("img_status") .innerHTML = "image loaded"; }; ele.src = </ script ></ body > </ html > |
Выход:
Используя метод addEventListener ():
HTML
<!DOCTYPE html>< html > < head > < style > #bg_img { width: 50vw; height: 50vh; } </ style ></ head > < body > < h2 >Welcome To GFG</ h2 > < p > Default code has been loaded into the editor </ p > < img id = "bg_img" /> < p id = "img_status" ></ p > < script src = </ script > < script > let ele = document.getElementById("bg_img"); ele.addEventListener("load", (e) => { document.getElementById("img_status") .innerHTML = "image loaded"; }); ele.src = </ script ></ body > </ html > |
Выход:
Примечание. Чтобы использовать jQuery, замените код прослушивателя событий следующим:
$ ("# bg_img"). on ("load", function () {
window.alert («Изображение загружено», 1);
});