Отложенная загрузка img с помощью jQuery

Есть замечательный сайт http://jquery.eisbehr.de/ с библиотекой jquery.lazy.min.js (весит чуть более 2 кб!). Она позволяет отложить загрузку изображений, до того момента, когда они понадобятся. 

Пример 1. Откладываем загрузку изображений, находящихся вне области просмотра: 

JS:   $("img.lazy").lazy();  
HTML:  <img data-src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" src="" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" alt="<?=$arElement["NAME"]?>" class="lazy" />

Пример 2: Есть слайдер, где сначала показывается 4 слайда, а по клику на стрелки доступны остальные:

template.php: <?foreach($arResult["ITEMS"] as $cell=>$arElement):?>    <?if($cell<4):?>
      <img
         src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>"
         height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>"
         width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>"
         alt="<?=$arElement["NAME"]?>" />
   <?else:?>
      <img
         data-src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>"
         src=""
         height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>"
         width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>"
         alt="<?=$arElement["NAME"]?>"
         class="lazy" />
      <?endif;?>  
 
JS:  
$(".next, .prev").on('click', function() {
   $("img.lazy-film-4").lazy({
      bind: "event",
      delay: 0
   });
});

Хотя, в идеале такие вещи делать AJAX-ом 

Пример 3: Подгрузим img в html-лайтбоксе:

$("#block-city-select").on('click', function() {
   $("img.lazy-city-box").lazy({
      bind: "event",
      delay: 0,
   });
});

P.S. Будьте внимательны - плагин не подгружает изображения, находящиеся внутри "display: none" элементов, даже если селектор на них указывает. Актуально для табов, как минимум.