Это удивительно! Но до сих пор ни один браузер не поддерживает нормально у объекта image событие onload! Событие наступает стихийно. Изображения в итоге то появляются, то не появляются вовсе, причем даже то же самое изображение во время разных загрузок одно
А вот здесь всплывает проблема номер один.
Реализация отложенной загрузки изображений на Javascript.
Теперь после полной загрузки текущего изображения по наступлению события объекта image onload удалить элемент span.preloader и отобразить само изображение, присвоив картинке css правило: visibility: visible;
Что же еще? Было бы хорошо визуально для посетителя показать, что на странице что-то происходит. Например, что отложенные изображения грузятся. Для этого достаточно вставить некий элемент span сразу после изображения, назначить ему css класс preloader и в рамках css стилизовать элемент. После чего назначить background ом тематическое интуитивно понятное динамическое изображение загрузки, скажем, в формате gif.
А что если загружать отложено только те изображения, которые видит посетитель. В видимой части экрана? И по мере надобности, когда посетитель воспользуется кнопкой scroll а, догружать остальные?
Усовершенствуем идею отложенной загрузки.
После полной загрузки страницы по событию window.onload каждой картинке «возвращаем» её родной атрибут src (что, по сути, вызывает «загрузку» оригинального изображения). Картинки одна за другой начинают «появляться» на странице.
Идея, в общем-то, простая. Есть такое событие в javascript «domready». Которое наступает во время получения полной структуры html документа и еще до полной загрузки страницы. Так вот, после наступления этого события мы получаем список нужных изображений, «сбрасываем» атрибут src каждой картинки, устанавливая для него значение, например, анкор: #. Src же изображения сохраняем в отдельном атрибуте изображения, например, longDesc. Скрываем картинку, назначая css правило: visibility: hidden.
Идея отложенной загрузки изображений на javascript.
При помощи отложенной загрузки изображений мы можем этого избежать. И при этом изображения при способе «отложенной загрузки» грузятся асинхронно, в произвольном порядке, после полной загрузки основного содержимого сайта, давая возможность посетителю приступить к чтению и просмотру интересующей его информации. Визуально глазами посетителя это существенно «ускоряет» загрузку страницы.
При обычной загрузке изображения, если встречается битое или отсутствующее изображение, или картинка загружается с другого источника, или картинка «слишком медленно» грузится - сайт «подвисает». Его загрузка не продолжится до тех пор, пока мы не получим текущее изображение, или не истечет минутный timeout. Что же видит посетитель? Зачастую ничего, просто белый экран, или обрывочную часть сайта. Будет ли он терпеть такую «выходку» сайта и вернется ли когда-нибудь снова?
Какие неприятности нас ожидают во время загрузки изображений?
Отложенная загрузка изображений при помощи javascript с использованием mootools, jQuery.
Это особенно актуально для сайтов, которые используют изображения высокого качества (новостные порталы, сайты, посвященные фотографии, дизайну, клипарту, социальные сети, объемные блоги и т.п.)
В этой статье мы поговорим об «ускорении» загрузки сайта при помощи «отложенной загрузки изображений» на Javascript, приведем примеры реализации для известных framework ов mootools и jQuery.
Хороший сайт должен грузиться быстро. Этот момент стоит учитывать и при создании сайтов, и при анализе и оптимизации уже существующих сайтов. При загрузке страниц интернет - проекта посетители не любят слишком долго ждать.
Ускоряем сайт. Отложенная загрузка изображений. Mootools, jQuery.
Ускоряем сайт. Отложенная загрузка изображений. Mootools, jQuery. | Блог о Joomla, Wordpress и SEO
Ускоряем сайт. Отложенная загрузка изображений. Mootools, jQuery. | Блог о Joomla, Wordpress и SEO
Комментариев нет:
Отправить комментарий