LQIP 라이브러리들이 있지만, 아주 간단하게 만들어보고 싶어서 제작하였다.

정말 단순히 처음에는 <img>태그를 두개를 사용 생성했다.

아주 저용량의 이미지(썸네일)와 오리지날 이미지. 오리지날 이미지에 onload를 작성한다.

<img src="썸네일" alt="이미지정보">
<img src="오리지날이미지" alt="이미지정보" onload="this.parentNode.childNodes[1].display='none';">

간단하게 생각했는데 생각보다 간단하지 않았다.

처음 생각은, 썸네일이 무조건 먼저 노출될 것이고, 느리게 불러와진 오리지날 이미지가 완료되면 썸네일을 숨길거라 생각했는데, 캐시가 저장되면 버벅이거나, 무수힌 f5에는 예상밖의 결과가 나타났다. 그리고 당연하지만 불필요한 태그를 생성해야한다.

아~~~주 간단히 만들어보려던게 조금 일이 커져서 아래의 결과물이 나왔다. (여전히 간단하긴 하다.)

결과물

(function(e){
    var img = document.querySelectorAll('[' + e + ']');
    var length = img.length;
    for (var i = 0; i < length; i++) {
        img[i].onload = function() {
            var src = this.getAttribute(e);
            if (this.getAttribute('src') !== src) {
                var width = 'width: ' + this.clientWidth + 'px;';
                var height = 'height: ' + this.clientHeight + 'px;';
                this.setAttribute('style', width + height + 'background-image: url(' + src +');');
                this.setAttribute('src', src);
            } else {
                this.setAttribute('style', 'background-image: url(' + src +');');
                return false;
            };
        }
    }
}('data-src'));

원리

  1. data-src를 이용. src에는 썸네일, data-src에는 원본 이미지경로를 기입한다.
  2. onload 시 src를 치환한다.
  3. 치환 중 생길 이질감은 style로 제거한다.
  4. 완료 후 불필요한 속성은 제거한다.