그누보드5, 아미나, 미소 베이직에서 전영역에 lazyload 적용하기

컨텐츠 정보

본문


사용자가 보지 않은 영역의 이미지들을 로드하지 않고, 


스크롤을 해야 이미지가 로드(다운로드)가 되는 방법입니다.


국내 사이트에는 많이 적용되어 있지 않지만, 외국에는 많이 쓰더라구요. ㅎㅎ


제 홈페이지의 경우 이미지가 적은 게시물은 상관없지만


여행 게시글의 경우 이미지가 매우 많아 게시물 진입시 많이 느렸습니다.


보통 10MB 정도 되더라구요.


그럴 경우 스크롤을 하면서 이미지를 다운로드를 하게되면 사용자입장에서도


초기 로딩속도가 빨라서 사이트 속도가 빠른 것으로 느껴지게 됩니다.



게시물의 lazyload 적용은 아미나 사이트의 도사님의 글을 활용하였습니다.


그 이외에 index 및 게시판 목록에서의 적용은 그에 대한 응용입니다.



1. lazyload 최신버전 다운로드


lazyload 파일은 CDN으로 편하게 이용하거나, 파일을 직접 서버에 설치하여 사용할 수 있습니다.


CDN 방식은 밑에 따로 설명드립니다.


파일을 직접 서버에 설치하려면 아래와 같이 하면 됩니다.


https://github.com/tuupola/lazyload/releases 


lazyload의 최신버전을 확인하려면 위 링크를 통하면 받을 수 있습니다.


압축파일에 첨부하였습니다. 


1.9.7 버전의 jquery.lazyload.min.js 파일만 있으면 됩니다.


그리고 loading용 gif 파일과 투명배경 파일도 같이 압축되어 있습니다.


저는 처음에 gif 파일을 적용하여 뭔가 로딩되는 느낌을 줬었는데요.


자꾸보다보니 뭔가 불편하더라구요. 그래서 투명 파일을 만들어서 바꿔줬더니 훨씬 좋았습니다.


첨부파일에 loading.gif가 움직이는 로딩느낌의 파일이고


trans.png가 그냥 830 X 553 의 투명파일입니다.


loading 파일을 직접만들 수도 있습니다.


https://loading.io/ 


위 사이트에 가서 만들 수 있습니다.


선택해서 적용하면 좋을 것 같습니다.



2. 게시물 내에서 lazyload 적용하기


http://amina.co.kr/bbs/board.php?bo_table=tip&wr_id=2529


위의 도사님 게시물을 참조하였습니다.


1번에서 다운받은 jquery.lazyload.min.js 와 loading 파일을 적정 위치에 넣습니다.


저는 js 파일을 그누보드 루트에 있는 js 폴더에 넣었고, 로딩파일을 그누보드 루트에 있는 img 폴더에 넣었습니다.



그리고 해당 js 파일을 로딩하는 장소를 선택해야 합니다.


제 홈페이지의 경우 최신글, 게시판목록, 게시판 내용 모두 적용하였기 때문에 전영역에서


로딩을 하는게 좋다고 생각하여 테마의 head 파일에 넣어줬습니다.


그누 루트의 /thema/Miso-Basic-4/head.php


위 파일의 4번째 줄에 


<script src="<?php echo G5_JS_URL; ?>/jquery.lazyload.min.js"></script>

<script type="text/javascript" charset="utf-8"> //lazyload 기능 추가

$(document).ready(function(){

$("img#lazy").lazyload({

threshold : 10,  

effect : "fadeIn",

});

});

</script>

위 내용을 넣어줍니다.


파일을 서버에 설치하지 않고 CDN을 이용하려면



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" integrity="sha512-jNDtFf7qgU0eH/+Z42FG4fw3w7DM/9zbgNPe3wfJlCylVDTT3IgKW5r92Vy9IHa6U50vyMz5gRByIu4YIXFtaQ==" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8"> //lazyload 기능 추가
    $(document).ready(function(){
        $("img#lazy").lazyload({
            threshold : 10,
            effect : "fadeIn",
        });
    });
</script>


위와 같이 넣으면 됩니다.


테마 내에서는 항상 js가 로딩됩니다.



혹시 홈페이지 전체가 아닌 게시글에만 적용하려면 보드스킨의 뷰스킨의 파일을 수정하면 됩니다.


저는 basic-board를 쓰는데요.


/skin/board/Basic-Board/view.skin.php 파일에서 대략 35번째 줄에 


<script src="<?php echo G5_JS_URL; ?>/jquery.lazyload.min.js"></script>

<script type="text/javascript" charset="utf-8"> //lazyload 기능 추가

$(document).ready(function(){

$("img#lazy").lazyload({

threshold : 10,  

effect : "fadeIn",

});

});

</script>

위 내용을 넣어주면 됩니다. 


CDN을 이용하려면 



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" integrity="sha512-jNDtFf7qgU0eH/+Z42FG4fw3w7DM/9zbgNPe3wfJlCylVDTT3IgKW5r92Vy9IHa6U50vyMz5gRByIu4YIXFtaQ==" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8"> //lazyload 기능 추가
    $(document).ready(function(){
        $("img#lazy").lazyload({
            threshold : 10,
            effect : "fadeIn",
        });
    });
</script>


위와 같이 넣으면 됩니다.



그럼 게시글을 클릭했을때만 js 파일을 로딩하게 됩니다.


그리고 게시글의 썸네일과 관련된 부분을 lazyload가 인식할 수 있게 만들어줘야 합니다.


/lib/thumbnail.lib.php 파일의 423번째 줄을 보면


$thumb_tag = '<img'.$itemprop.' src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="img-tag '.$class.'"'.$img_attr.'/>';

위 내용이 있는데요.


$thumb_tag = '<img'.$itemprop.' src="'.G5_URL.'/img/loading.gif" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" id="lazy" class="img-tag '.$class.'"'.$img_attr.'/>'; 

위와 같이 변경합니다. 


혹시 투명파일을 원한다면


$thumb_tag = '<img'.$itemprop.' src="'.G5_URL.'/img/trans.png" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" id="lazy" class="img-tag '.$class.'"'.$img_attr.'/>'; 

위와 같이 경로를 바꿔주면 됩니다.


다만 이 경우 썸네일만 적용되기 때문에 원본이 들어갔을 경우에는 lazyload가 적용되지 않습니다. 


그래서 384라인의


$thumb_tag = '<img'.$itemprop.' src="'.$src.'" alt="'.$alt.'" class="img-tag '.$class.'"'.$img_attr.'/>';



$thumb_tag = '<img'.$itemprop.' src="'.G5_URL.'/img/loading.gif" data-original="'.$src.'" alt="'.$alt.'" id="lazy" class="img-tag '.$class.'"'.$img_attr.'/>';

위와 같이 바꿉니다.


또는 투명배경을 원하시면


$thumb_tag = '<img'.$itemprop.' src="'.G5_URL.'/img/trans.png" data-original="'.$src.'" alt="'.$alt.'" id="lazy" class="img-tag '.$class.'"'.$img_attr.'/>';

위와 같이 바꾸시면 됩니다.



한별아빠님께서 452번째 라인도 링크이미지 관련이라 같이 적용하면 된다고 하셨는데


적용해보니 같은 사진을 2번 로딩하더라구요. 그 부분은 안하는게 좋을 것 같습니다.


이제 홈페이지 게시글을 클릭하면 lazyload가 적용되는 것을 알 수 있습니다.



3. 최신글에 lazyload 적용하기


최신글과 게시글 모두 적용하기 위해서 js 파일을 테마의 head.php 에 적용해야 합니다.


이제 최신글 위젯에서 수정하면 됩니다.


적용방법은 거의 같으므로 몇개만 소개해드리겠습니다.


miso-post-slider 에 적용하기


/thema/Miso-Basic-4/widget/miso-post-slider/widget.rows.php 


위 파일에서 92번째 줄을 보면


<div class="img-item">

<img <?php echo $img_src;?> alt="<?php echo $list[$i]['img']['alt'];?>" class="wr-img">

위와 같은 내용이 있는데요.


<div class="img-item">

<img src="../img/loading.gif" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">

위와 같이 변경하면 됩니다.


혹시 투명배경을 원한다면


<div class="img-item">

<img src="../img/trans.png" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">

위와 같이 바꾸면 됩니다.



miso-post-gallery에서도 


59번째 줄에


<img src="../img/loading.gif" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">

위와 같이 변경하면 됩니다.


마찬가지로 투명파일을 원하면 


<img src="../img/trans.png" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">

위와 같이 바꾸면 됩니다.


miso-post-webzine에서도 101번째줄에


<img src="../img/loading.gif" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">

위와 같이 바꾸면 됩니다.


<img src="../img/trans.png" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">

투명을 원하시면 위와 같이 변경하면 되구요.




4. 게시판 목록에서 lazyload 적용하기


js 파일을 테마의 head.php에 로딩하게 만듭니다.


저는 basic-board의  basic-webzine 목록스킨을 사용하는데요


/skin/board/Basic-Board-2.0/list/basic-webzine/list.skin.php


위 파일에서 142번째 줄을 보면


$wr_thumb = ($thumb['src']) ? '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

위와 같은 내용을


$wr_thumb = ($thumb['src']) ? '<img src="../img/loading.gif" data-original="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img" id="lazy">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

위와 같이 바꾸면 됩니다.


$wr_thumb = ($thumb['src']) ? '<img src="../img/trans.png" data-original="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img" id="lazy">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

투명 배경을 원하시면 위와 같이 바꾸면 됩니다.



basic-gallery에서는 


/skin/board/Basic-Board-2.0/list/basic-gallery/list.skin.php


위 파일 157번째 줄에


$wr_thumb = ($thumb['src']) ? '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

위 내용을 찾아서


$wr_thumb = ($thumb['src']) ? '<img src="../img/loading.gif" data-original="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img" id="lazy">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

위와 같이 바꾸면 됩니다.


$wr_thumb = ($thumb['src']) ? '<img src="../img/trans.png" data-original="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img" id="lazy">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

투명 배경을 원하시면 위와 같이 바꾸면 됩니다.



이와 같이 전 영역에서 적용할 수 있습니다. 


혹시 적용이 안되면 알려주세요.

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 153 / 1 Page
RSS
그누보드5.4 나리야빌더에서 box shadow 효과 적용하기

나리야 현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.우선 적용 전 이미지입니다.위와 같이 사…

그누보드 나리야빌더 NB-Basic 보드스킨 GIF 움짤 표현 최적화하기 댓글 2

나리야 그누보드 5.4.2.8 버전부터 움직이는 GIF 이미지를 올리면 MP4나 WEBM으로 변환하여 보여줄 수 있습니다.https://sir.kr/g…

윈도우10 ffmpeg로 GIF 움짤을 MP4, WEBM으로 변환하는 방법

서버 1. 들어가며GIF 움짤을 하나씩 변환하려면 온라인 컨버터 사이트를 이용하면 편합니다.하지만 움짤이 몇백개가 넘어가면 힘들겠죠? ^^;;그래서 …

php 도커 이미지에 ffmpeg 추가하기

서버 1. 들어가며최근 그누보드5.4에 움직이는 gif 이미지를 mp4 동영상으로 변환하는 플러그인이 올라왔습니다.https://sir.kr/g5_p…

Acme.sh Docker 이미지로 와일드카드 인증서 발급받기

서버 1. 왜 도커로 설치할까요?DNS 인증을 통한 acme.sh Letsencrypt SSL 인증서 발급받기LuaDNS API를 이용한 무료도메인 …

그누보드 5.4에 Vditor 에디터 올리기

그누보드 기본 소개편집모드 바꾸기이미지 드래그 앤 드롭 업로드 기능1. 들어가며깃허브 : https://github.com/Vanessa219/vdito…

최근글


새댓글