Автор

Плавная загрузка картинок на  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 – в этот параметр можно установить свою заглушку.

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


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

Простой интерактивный ресурс, который можно использовать для виртуального просмотра вашего продукта.


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

На просторах интернета можно не раз увидеть подобную версию галереи, но сегодня мы, все таки, решили уделить урок по созданию этой полноэкранной  галереи для сайта с помощью jQuery.  Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз. Вот как все это выглядит..


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

Ранее в своём блоге, в статье «Невероятная наглость» я уже описывал ситуацию когда у меня спёрли весь контент с моего сайта и тогда всё решилось силами хостинга на котором распологался сайт клон! Сейчас всё обстоит совершенно иначе.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close