그누보드5.4에 lazyload 적용하는 방법
0. 들어가며
lazyload는 밑에 스샷처럼 이미지가 보여질 때 다운 받게 해주는 도구입니다.
위와 같이 스크롤 할때 이미지가 다운 받아지는 것을 확인할 수 있습니다.
이미지가 엄청나게 많을 때 트래픽에도 도움이 되고, 보는 사람 입장에서도 상당히 쾌적하게 느껴집니다.
예시링크 그누보드 5.4 + 나리야빌더 기본테마
https://aced.ga/gallery/lazyload-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4/
1. 파일 준비하기
링크1에서 jquery.lazyload.min.js 파일을 받아 /js 폴더에 넣습니다.
또는 CDN에 있는 파일을 불러오면 됩니다. 밑에 자세히 알려드리겠습니다.
적절한 loading.gif나 투명배경 이미지(예를들어 trans.png)를 받거나 만들어서 /img 폴더에 넣습니다.
img-loading.svg
또는 위 이미지를 우클릭해서 저장 후 /img 폴더에 넣습니다.
또는 위 파일도 CDN을 이용할 수 있습니다. 밑에 자세히 알려드리겠습니다.
이제 준비는 끝났습니다.
파일 2개만 수정하면 됩니다.
2. head.sub.php 파일 수정하기
그누보드 5.4 basic 테마 기준
/theme/basic/head.sub.php 82~83번째 줄에 있는
?>
</head>
위 내용 사이에
<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>
위 내용을 넣습니다.
즉
?>
<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>
</head>
위와 같은 형태가 되겠죠?
또는 하단파일 수정(tail.sub.php)
혹시 파일을 다운받지 않고 그냥 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>
</head>
위와 같은 코드를 넣으면 됩니다.
3. thumbnail.lib.php 수정하기
if ($width) {
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'"/>';
} else {
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'"/>';
}
위 내용을
if ($width) {
$thumb_tag = '<img src="'.G5_URL.'/img/img-loading.svg" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
} else {
$thumb_tag = '<img src="'.G5_URL.'/img/img-loading.svg" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
}
위와 같이 바꿉니다.
img-loading.svg 에 자신이 가지고 있는 로딩 파일이나 투명배경 이미지 경로를 넣으면 됩니다.
또는 CDN을 이용하려면
if ($width) {
$thumb_tag = '<img src="//cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
} else {
$thumb_tag = '<img src="//cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
}
위와 같이 넣으면 잘 나옵니다.
나리야 빌더에 적용하는 내용은 링크2에 올려놓았어요! 투명배경과 loading.gif까지!
https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=641