Блог

Главная - Вопросы по программированию - как узнать, было ли загружено изображение с помощью javascript

как узнать, было ли загружено изображение с помощью javascript

#javascript #jquery #image #events #onload

#javascript #jquery #изображение #Мероприятия #onload

Вопрос:

Я кодирую веб-сайт, на котором отображаются альбомы с изображениями, страница загружает большие пальцы и применяет белые наложения к каждому изображению до их полной загрузки.

Я закодировал это в local, и оно работает нормально. Но загрузка файлов на мой сервер и загрузка страницы приводит к нескольким ошибкам отображения, некоторые белые наложения не исчезают, потому что функция загрузки jQuery не запускается, поскольку изображения загружаются до загрузки и применения скрипта.

Решением было бы применить белое наложение только к изображениям, которые все еще загружаются при выполнении скрипта jQuery.

Мой вопрос в том, как узнать, все еще извлекается определенный элемент на странице или он полностью отображен на экране?

ПРИМЕЧАНИЕ: вот страница http://www.benjamindegenne.com/portfolio/numeric/upper-playground /

Ответ №1:

Обновления

Предыдущее решение было неверным. (Благодаря @donut).

Вот альтернативный простой способ сделать это с помощью jQuery —

 $(function() {
    $("<img src='img_01.jpg' />").load(function() {
        // Image img_01.jpg has been loaded
    });
});


JavaScript

Используйте предварительную загрузку изображения в JavaScript —

 img1 = new Image();
img1.src = "image.jpg";
// at this line image.jpg has been loaded

После img1.src = "image.jpg"; этого вы можете убедиться, что изображение загружено, и вы можете написать свою бизнес-логику

jQuery

Вот простой плагин jQuery для достижения этой цели —

 // image preloading plugin
$.fn.preload = function () {
    this.each(function () {
        $('<img/>')[0].src = this;
        // at this line "this" image has been loaded
    });
};

Пример использования —

 var imagesToPreload = ["img01.jpg", "img02.jpg", "img03.jpg"];
imagesToPreload .preload();
// at this line all images has been loaded

Комментарии:

1. как я могу узнать, было ли загружено изображение?

2. @Oddantfr U обновил код и добавил некоторые комментарии в том месте, где вы уверены, что изображения были загружены

3. спасибо, это выглядит великолепно. однако в моем случае это не подходит. Загляните на страницу, если у вас есть время, чтобы помочь. это было бы продуманно. benjamindegenne.com/portfolio/numeric/upper-playground

4. @Oddantfr Я думаю, что это может сработать в вашем случае. Предварительная загрузка изображений означает, что они загружаются в кэш браузеров. После загрузки изображения вы можете изменить изображение с индикатора выполнения на фактическое изображение. На этот раз не будет никакой задержки, потому что изображение уже было загружено в кеш браузера. Дайте мне знать, если это не сработает для вас.

5. Вместо этого я поместил скрипт в заголовок внизу страниц, и без изменения какого-либо скрипта он работает нормально. Я понимаю цель вашего скрипта, но поскольку изображения не кэшируются (потому что атрибут src вызывает php-скрипт, который создает и возвращает соответствующий thumb), мой фактический скрипт не нуждается в модификациях. в любом случае я приму во внимание вышесказанное, если когда-нибудь я изменю код. Спасибо!

Ответ №2:

https://github.com/desandro/imagesloaded — изображения, загруженные плагином jQuery, сделают это за вас 😉