Lazy Load

[squier]

Отложенная загрузка изображений - отличный способ съэкономить ресурсы и трафик людей. Для этого существует плагин lazyload.
У него множество настроек и проверок.

Однако, было замечено, что страница начинает нервно дрыгаться при скролинге. Это связано с тем, что при нём проверяется всё подряд. Даже после загрузки всех отложенных картинок что-то прыгает.

Было решено написать аналог на jquery. Собственно, делюсь этим простым кодом.

function lazyloads(){
            $( "img[data-original]" ).each(function() {
                itop=$(this).offset().top;

if(($(window).scrollTop()+$(window).height())>itop) {
                    $(this).attr('src', $(this).attr('data-original'));
                    $(this).removeAttr('data-original');
                }

});
         }
         $(document).ready(function(){
            lazyloads();
            $(window).scroll(function() {
               lazyloads();
            });
         });

Картинки прописывать
.
Если хотите, чтобы картинки подгружались на X пикселей ниже окна, то прибавьте к if(($(window).scrollTop()+$(window).height())>itop) { число.
Например,
if(($(window).scrollTop()+$(window).height()+100)>itop) {
прогрузит картинки еще на 100px вниз.