Как узнать, было ли изображение загружено с использованием JavaScript - PullRequest
Новая
       30

Как узнать, было ли изображение загружено с использованием JavaScript

5 голосов
/ 10 октября 2011

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

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

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

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

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

Ответы [ 2 ]

4 голосов
/ 10 октября 2011

Обновления

Предыдущее решение было неверным.(Спасибо @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

2 голосов
/ 10 октября 2011

https://github.com/desandro/imagesloaded - загруженные изображения плагин jQuery сделает это за вас; -)

...