Автор

Плавная загрузка картинок на  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

Вчера рылся в инете на предмет найти что-то интересное и удача не обошла меня стороной, я нарыл на зарубежном сайте этот пример Parallax Scroll Effects, правда пришлось немного повозиться чтоб его скачать, а точнее сохранить себе. Буквально около 3 часов мытарства собрал всё воедино, и теперь вы сможете оценить, скачать и использовать в своих нуждах этот пример!


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

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


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

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close