image lazy loading

image lazy loading

웹에 이미지가 많은 경우 로딩으로 인해 페이지가 제때 뜨지 않는 경우가 있을수 있다. 이런 경우를 방지하기 늦게(lazy) 이미지를 로딩하는 기법을 이용하여 페이지 로딩을 빠르게하는 방법이다.
직접 구현을 해서 사용할수 있지만 여기서는 open source 중에 하나인 belazy.js, lazyload를 이용해서 알아보자.

blazy

http://dinbror.dk/blazy/

<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />

var bLazy = new Blazy({
    breakpoints: [{
      width: 420 // Max-width
          , src: 'data-src-small'
    }]
    , success: function(element){
  setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the "loading" class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/,'');
  }, 200);
    }
});

lazyload

https://github.com/verlok/lazyload

<img alt="..."
     data-src="../img/44721746JJ_15_a.jpg"
     width="220" height="280">

var myLazyLoad = new LazyLoad();