모바일 웹뷰를 빠르게 jquery.lazyload 적용하기

앱내 웹뷰를 사용하는 경우,  이미지가 많이 사용되는 컨텐츠는 유독 페이지가 열리는데 오래 걸린다.

웹뷰 내에서 모든 리소스가 로드가 된 이후에야 페이지가 열리는데, 컨텐츠를 소비하는 사용자의 입장에서 로딩이 오래걸린다면 답답함을 안겨줄수 있을것이다.

이를 두가지 방법을 이용하여 속도를 개선해 보았다. 

우선 필자의 경우에는 에디터를 사용하여 컨텐츠를 작성하고 하나의 페이지 파일에서 컨텐츠를 불러와 출력하는 형태의 프로그램을 사용중이었는데

다행스럽게도 이미지 태그의 경우 대부분 그 형태가 비슷하여 정규식으로 원하는 형태로 변형이 가능한 상황이었다.

우선 속도 해결 방안 첫번째로는, 컨텐츠 내의 이미지들을 전부 loading 이미지로 바꿔주는것이다. 

$content = $row['content'];

$content = preg_replace('/img src=/ims','img class="replaceSrc" src="/assets/images/loading.gif" originalSrc= ', $content);

위의 코드는 컨텐츠 내에 <img src="/assets/images/aaaaaaaa.jpg" /> 라는 태그가 있다면 

<img class="replaceSrc" src="/assets/images/loading.gif" originalSrc="/assets/images/aaaaaaaa.jpg"/> 로 변경해주는 치환 코드이다.

이미지를 로딩중인것처럼 사용자에게 보이게 하기위해 우선 바꿔놓는것이다. 

다음, 페이지가 로드가 되면 원래 이미지로 돌리는것이다.

$().ready(function(){

setTimeout(function(){

$('.replaceSrc').each(function(){

$(this).attr('src', $(this).attr('originalSrc'));

});

}, 500);

});

샘플 보기 : http://lbr.kr/main/test1

간단히 해결되었다.

 일단 페이지 로딩은 다 끝난것처럼 로드가 되었고, 페이지가 열리면 0.5초뒤 이미지들이 순차적으로 로드가 된다.

단 이 방법의 단점은 이미지가 많을 경우 한꺼번에 로드가 되므로 약간의 스크롤 딜레이가 발생할수 있다는점이다. 

두번째 방법은 첫번째 방법과 비슷하긴 하나, 스크롤 화면 영역에 이미지들만 순차적으로 로드가 되게 하는 방법이다.

잘 알려진 jquery 의 lazyload 플러그인을 이용하였다.

우선 페이지가 로드되기전 php 스크립트 영역에서 플러그인에 맞게 img 태그를 다음과 같이 변경한다. 

$content = $row['content'];

$content = preg_replace('/img src=/ims','img class="lazy" data-original= ', $content);

다음 플러그인을 로드만 해주면 끝이다. 

<script src='/assets/js/jquery.min.js'></script>
<script src='/assets/js/jquery.lazyload.js'></script>
<script>
$(function() {
$("img.lazy").lazyload();
});

</script>

샘플보기 : http://lbr.kr/main/test2

즐거운 코딩을 위하여!