Главная / Java Script / ООП / Mootools /

Lazy Load - отложенная загрузка изображений

Суббота, 29 Январь 2011

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

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

Именно для этого существует плагин под MooTools - Lazy Load, от David Walsh, который выполняет данную задачу. И так инструкция по применеию Lazy Load - отложенная загрузка картинок. Для начала подключаем библиотеку MooTools, затем сам скрипт lazy-load.js:

 
<script src="js/mootools-1.2.4-core-yc.js"></script>
<script src="js/lazy-load.js"></script>

Затем создаем экземпляр класса LazyLoad, и передаем ему обьект с параметрами:

 
window.addEvent('domready',function() {
  var lazyloader = new LazyLoad({
  range: 120,
  image: '',
  resetDimensions: false,
  elements: 'img.lazyme',
 
  //onScroll: function(){alert('scrolling');},
  //onLoad: function(){alert('image loaded');},
  //onComplete:function(){alert('all images loaded');}
 
  });
});

Опишу значение передаваемых параметров:

range: - диапазон пространства от нижней части окна браузера с которого начнется загрузка изображений
image: - изображение (путь к изображению) на которое будут заменены изображения до загрузки, можно сюда поместить логотип например.
resetDimensions: - обнуляет высоту и ширину у подгружаемых изображений.
elements: - элементы изображений к которым будет применятся отложенная загрузка LazyLoad.
container: - контейнер в котором следует искать изображения для применения к ним отложенной загрузки, по умолчанию это весь документ (window).

Также вы видите закомментированные три функции LazyLoad:

onComplete: - событие когда изображение загружено.
onLoad: - событие когда изображение начало загружатся.
onScroll: - событие когда прокручивается скролл.

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

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>lazy load | cleverscript</title>
  <meta charset="windows-1251" />
  <meta name="title" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  <script src="js/mootools-1.2.4-core-yc.js"></script>
  <script src="js/lazy-load.js"></script>
  <!--[if IE]>
    <script src="js/html5.js"></script>
  <![endif]-->
  <script>
    window.addEvent('domready',function() {
      var lazyloader = new LazyLoad({
        range: 120,
        image: '',
        resetDimensions: false,
        elements: 'img.lazyme',
 
        //onScroll: function() { alert('scrolling'); },
        onLoad: function() { alert('image loaded'); },
        onComplete:function() { alert('all images loaded'); }
 
      });
    });
  </script>
</head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Lazy Load</h1>
      </header>
      <article> 
        <a target="_blank" href="img/1.jpg" class="image"><img alt="" src="img/1.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/2.jpg" class="image"><img alt="" src="img/2.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/3.jpg" class="image"><img alt="" src="img/3.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/4.jpg" class="image"><img alt="" src="img/4.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/5.jpg" class="image"><img alt="" src="img/5.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/6.jpg" class="image"><img alt="" src="img/6.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/7.jpg" class="image"><img alt="" src="img/7.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/8.jpg" class="image"><img alt="" src="img/8.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/9.jpg" class="image"><img alt="" src="img/9.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/10.jpg" class="image"><img alt="" src="img/10.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/11.jpg" class="image"><img alt="" src="img/11.jpg" class="lazyme" /></a>
        <a target="_blank" href="img/12.jpg" class="image"><img alt="" src="img/12.jpg" class="lazyme" /></a>
      </article>
      <aside></aside>
      <footer></footer>
    </div>
  </body>
</html>

Еще хотел сказать по поводу стилей, обрамляющему изображение тегу <a>, следует прописать следующие стили CSS:

 
width:600px; //your width
height:200px; //your height
display:block;
background:url(../img/ajax-loader.gif) center center no-repeat #fff; //your ajax loader file

А самим изображениям:

 
a.image img.lazyme{
  display:block;
}

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

Посмотреть пример: Lazy Load

Скачать пример: Скачать Lazy Load

PS. И не забудьте подписатся на ленту новостей Подписка на RSS

Метки:

Lazy Load - отложенная загрузка изображений

Похожие статьи:

Добавить комментарий