그누보드5.4에 lazyload 적용하는 방법 정보
그누보드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 폴더에 넣습니다.
또는 위 파일도 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>
위와 같은 형태가 되겠죠?
혹시 파일을 다운받지 않고 그냥 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
--
2020-08-04 업데이트
lazy id를 lazy class로 변경
!-->!-->!-->!-->!-->!-->!-->11
댓글 51개
저희 집 시놀로지는... 제가 쓰고 싶어 샀는데....
마눌님의 잡다한 저장소가 되었쬬~~~
마눌님의 백만원짜리 D 드라이브가 되었어요 ㅠㅠ
전 홈서버로 100% 홈페이지만 돌려요 ㅎㅎ 하드도 5TB 들어있는데 그냥 홈페이지 백업만 ㅎㅎ
이미지 들어가는 곳은 view.skin.php에서 anchor: 1, 근처 아무곳에 넣어서 테스트 부탁드립니다.
lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',
이것을 넣어주면 됩니다.
로딩 이미지는 어디에 넣어야 할까요?
3. 이미지 들어가는 곳은 view.skin.php에서 anchor: 1, 근처 아무곳에 넣어서 테스트 부탁드립니다.
lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',
basic-md에도 없습니다. 흠...
그냥 뷰스킨에만
<script>
Vditor.preview(document.getElementById('bo_v_con'),
document.getElementById('markdownText').textContent, {
markdown: {
toc: true,
},
lang: 'ko_KR',
hljs: {
style: 'native',
},
className: 'preview vditor-reset',
customEmoji: emojiOptions,
lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',
})
</script>
이렇게 넣어봤는데 안되네요.
헤드에도 lazyload 넣어봤는데 안되네요 흠...
PHP쪽 관련 자료가 많이 없네요.
방법을 찾아봐야겠습니다.
lang: 'ko_KR', 아래에 저 옵션 넣어 보세요. 이미지는 적당한 것으로 넣으시고.
로컬에서 테스트하니 순간적으로 나왔다가 없어지네요.
그 순간 로딩 아이콘은 봤습니다.
실제로 개발자 모드의 network에 들어가니 그냥 전부 다운로드 받네요.
lazyload는 스크롤할때 다운로드 되어야 되는데.. 그게 작동 안하고 그냥 전부 다운 받아버리네요.
(레이지 로딩 개념도 잘몰랐고.)
지원되는 것이 많은 데 몰라서 못쓰는것도 많습니다.
한번 체크해 봐야겠습니다.
정말 간단하게 적용할 수 있을 것 같은데요!
처음에 테스트해 보니, 안되서, 그냥 놔두었는데..
일단 이미지가 올라가면 webp로 변환되면서
img.hacpai.com 이라는 CDN으로 가는 것 같습니다.
그리고 lazyloading도 자제적으로 뭔가 작업한 것 같습니다.
vditor로 업로드 시 썸네일 작업을 하지 않는게 조금 아쉽네요.
원본이 그대로 올라가니...
그리고 클릭했을 때 원본이 팝업으로 나오면 좋겠는데 그건 좀 어렵겠죠 ㅠㅠ
그 랜더링 되는 화면이 엄청 작은데요.
거기에 이미 이미지가 있다고 판단되어서 로딩이 되는게 아닌가 생각해봅니다.
구조적으로 이미지가 다 보여진다는 것이라고 생각합니다.
그리고 지금 테스트해보니, 레이지 로딩이 되는 것 같습니다.
로컬이라서 워낙 빠르게 나타나서..
스크롤을 하지 않고 디벨러퍼로 보니 화면에 나타나지 않은 이미지는 모두 loading 이미지로 되어 있네요..
어떻게 확인하나 했는데, 이런식으로 확인이 가능하네요
더블 체크 부탁드립니다.
여기에 올려놨듯이
lazyloading이 됩니다.
그런데 문제는 뭐냐면 처음에 랜더링할때 화면이 작아서
웹브라우저에서는 아무리 이미지가 많아도,
작은 랜더링 화면 안에 수백개의 이미지가 다 들어있다고 판단하는 것 같습니다.
제가 방금 극단적으로 웹브라우저 높이를 작게해보니 잘 됩니다.
즉, 처음 랜더링할 때 그 화면을 브라우저에서 보고 있으면 모든 이미지를 한번에 로딩하는 것이고,
웹브라우저를 극단적으로 줄이면 랜더링화면을 안보니
랜더링 이후에 보면 이미지가 정상적으로 출력되니 그때는 lazyloading이 잘 되는 것입니다.
랜더링때 실제 게시글의 높이만큼 화면이 보여지면 문제가 해결될 것 같습니다.
하지만 지금 상황에서는 랜더링 할때 계산 후 게시글의 높이가 정해지니, lazyloading이 안되는 것 같습니다.
제 스샷을 보면 이해되실 듯 합니다.
지금 새로고침할 때 빈 화면을 웹브라우저가 보면 모든 이미지가 로딩이 되고
빈화면을 웹브라우저가 보질 않으면 lazyloading이 됩니다.
특이하게 모바일에서는 잘 되네요. ㅎㅎ
F5 보다는 컨트롤 + F5를 하면 확실히 알 수 있네요 ㅎㅎ
2560 x 1440 이거든요.
높이를 조금만 줄여도 잘 됩니다.
하지만 풀 화면에서 컨트롤 + F5를 하면 전부 로딩이 되더라구요
https://hacpai.com/article/1595921029800 여기것 copy & paste하고
사진 키워서 모두 다운로드 해서 같은 자리에 넣고 테스트했습니다.
로컬이라서 제일 마지막에 3단 뛰기 gif 이미지 넣고 테스트했습니다.
ctrl+f5를 눌러도 제일 마지막은 아직도 로딩 아이콘으로 남아 있습니다.
일단 되기는 되는 것 같습니다.
글을 많이 넣고 이미지를 넣어보니 정상 작동합니다.
원래 극단적으로 이미지만 전부 있는 경우는 드무니 충분히 잘 작동한다고 볼 수 있겠습니다. ㅎㅎ
이미지의 경우 그누보드 thumbnail.lib.php로 썸네일 만들면 좋지 않을까요?
그건 힘들겠죠?...
그리고 클릭하면 원본 팝업되면 더 좋을 것 같은데..
그러면 이미지 쪽도 거의 완벽하다고 볼 수 있겠습니다.
에디터의 upload.php를 좀 만지면 될 것 같기도 합니다.
thumbnail.lib.php는 그누보드에서 해주면 될것 같습니다.
html이 렌더링이 끝난 후에
transform(html) {
// 이미지 태그 찾아서
// 접속된 디바이스에 맞는 thumbnail을 만들고
// 이미지 링크에 썸네일과 원본이미지를 넣어주고
return html; 하시면 됩니다.
}
대략 동작은 이렇습니다. 현재 열심히 정규식을 배우고 있습니다.
잘 부탁드립니다. 기다릴게요 ㅎㅎ
에디터가 더 중요하니..
나중에 시간나면 부탁드립니다. ㅎㅎ
참고로 id보다는 class 를 사용하는게 좋을듯 합니다.
img.lazy 로 바꾸고
썸네일 불러올때
class=lazy
이렇게 넣으면 될까요?
id는 페이지에서 유일한 값이어야 하는데 첨부이미지는 여러장 업로드하기 때문에 class로 하는게 좋습니다.
예를 들어 abc.com/data <- 여기 폴더 이미지 파일을
test.abc.com/data <- 이런 주소 형식으로 바꿔서 출력하고 싶습니다.
어렵네요..ㅠㅠ
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"/>';
}
요기 참조요