Автор

Плавная загрузка картинок на  jQuery

Плавная загрузка картинок на jQuery


Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин Lazy Load.

Самый наглядный и лучший пример работы Lazy Load - это лента любой социальной сети. Сам принцип прост, подгружать изображения постепенно, по мере прокрутки страницы пользователем. Если вдаться немного в теорию, то при открытии HTML страницы её загрузка происходит в два этапа. Во-первых, загружается структура документа, а во-вторых, происходит дозагрузка встраиваемых файлов (в нашем случае - картинок). Lazy Load вклеивает вместо наших изображений пустышки с минимальным весом, путем генерации их через data:image;base64, а при прокрутке уже догружает основной медиа контент. Таким образам сокращается время загрузки страницы, что очень хорошо!

 

ДЕМО
ИСХОДНИКИ

 

Шаг 1. HTML

Итак, давайте начнем с подключения скриптов:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>

Добавим изображения на страницу:

<p><img class="lazyImg" data-original="img/img1.jpg" width="700" height="600" alt="lazyload image1" /></p>
<!-- ... -->
<p><img class="lazyImg" data-original="img/img10.jpg" width="700" height="600" alt="lazyload image10" /></p>

При добавлении разметки важно указать атрибуты width и height, иначе работать скрипт не будет или указать ширину и высоту в стилях картинки.

 

Шаг 2. JS

Теперь вызываем новый метод после загрузки HTML документа:

$(function(){

    $("img.lazyImg").lazyload({
        effect: "fadeIn"
    });
});

У плагина есть несколько полезных настроек:

  • event – событие, по которому начинать загрузку картинки (click или scroll);
  • effect – анимация отображения (show или fadeIn);
  • container – указывается контейнер, в котором нужно искать изображения;
  • placeholder – в этот параметр можно установить свою заглушку.

 

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Плавная загрузка картинок на  jQuery

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


Плавная загрузка картинок на  jQuery

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


Плавная загрузка картинок на  jQuery

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


Плавная загрузка картинок на  jQuery

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


75 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close