그누보드5, 아미나, 미소 베이직에서 전영역에 lazyload 적용하기
컨텐츠 정보
- 9,772 조회
- 0 추천
- 목록
본문
사용자가 보지 않은 영역의 이미지들을 로드하지 않고,
스크롤을 해야 이미지가 로드(다운로드)가 되는 방법입니다.
국내 사이트에는 많이 적용되어 있지 않지만, 외국에는 많이 쓰더라구요. ㅎㅎ
제 홈페이지의 경우 이미지가 적은 게시물은 상관없지만
여행 게시글의 경우 이미지가 매우 많아 게시물 진입시 많이 느렸습니다.
보통 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 파일을 직접만들 수도 있습니다.
위 사이트에 가서 만들 수 있습니다.
선택해서 적용하면 좋을 것 같습니다.
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>';
투명 배경을 원하시면 위와 같이 바꾸면 됩니다.
이와 같이 전 영역에서 적용할 수 있습니다.
혹시 적용이 안되면 알려주세요.
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.
-
링크
-
첨부등록일 2020.05.24 20:18
