[jquery 실습] 이미지 로딩 중 대체 이미지 보여주기

$(document).ready(function () {
    var loadImgLink = "대체 이미지 주소";
    var target = $("img"); // 셀렉터
    for (i = 0; i < target.length; i++) {
        var tg = target.eq(i);
        tg.attr("src-data", tg.attr("src"));
        tg.attr("src", loadImgLink);
        var img = document.createElement("img");
        img.src = tg.attr("src-data");
        img.dataeq = i;
        img.onload = function () {
            var tgg = $(".main-article-content img").eq(this.dataeq);
            tgg.attr("src", tgg.attr("src-data"));
            tgg.attr("src-data", "");
        };
    }
});

 

대체 이미지 주소엔 로딩 중 보여줄 이미지 주소를 넣어주면 된다.

원본 이미지의 src를 따와서 새 이미지를 생성 후, 새 이미지의 onload가 완료되면 기존 이미지 링크로 바꿔주는 간단한 스크립트.

 

작동은 잘 된다. 근데 몇 가지 단점을 꼽자면:

1. 티스토리 플러그인 "반응형 웹스킨 이미지 최적화"와 사용할 경우 잘 작동하지 않는다.
2. 웹 페이지 로딩 속도 개선을 위해 작성했으나, 로딩할 이미지를 하나 더 만드는 방식이라 속도 개선에 도움을 주진 않는다.

 

물론 눈속임 용도라면 어느 정도 괜찮다.

큰 이미지 로딩 시 줄이 그어지듯 로딩되는게 보기 싫다면 사용해도 좋을 듯.