그누보드5.4에 lazyload 적용하는 방법
링크
https://github.com/tuupola/lazyload/releases (333) https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=641 (201)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번째 줄에 있는
[code]
?>
</head>
[/code]
위 내용 사이에
[code]
<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>
[/code]
위 내용을 넣습니다.
즉
[code]
?>
<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>
[/code]
위와 같은 형태가 되겠죠?
혹시 파일을 다운받지 않고 그냥 CDN에 있는거 불러올 수도 있습니다.
그러면
[code]
?>
<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>
[/code]
위와 같은 코드를 넣으면 됩니다.
3. thumbnail.lib.php 수정하기
[code]
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.'"/>';
}
[/code]
위 내용을
[code]
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"/>';
}
[/code]
위와 같이 바꿉니다.
img-loading.svg 에 자신이 가지고 있는 로딩 파일이나 투명배경 이미지 경로를 넣으면 됩니다.
또는 CDN을 이용하려면
[code]
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"/>';
}
[/code]
위와 같이 넣으면 잘 나옵니다.
나리야 빌더에 적용하는 내용은 링크2에 올려놓았어요! 투명배경과 loading.gif까지!
https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=641
--
2020-08-04 업데이트
lazy id를 lazy class로 변경
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 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에도 없습니다. 흠...
그냥 뷰스킨에만
[code]
<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>
[/code]
이렇게 넣어봤는데 안되네요.
헤드에도 lazyload 넣어봤는데 안되네요 흠...
PHP쪽 관련 자료가 많이 없네요.
방법을 찾아봐야겠습니다.
lang: 'ko_KR', 아래에 저 옵션 넣어 보세요. 이미지는 적당한 것으로 넣으시고.
로컬에서 테스트하니 순간적으로 나왔다가 없어지네요.
그 순간 로딩 아이콘은 봤습니다.
실제로 개발자 모드의 network에 들어가니 그냥 전부 다운로드 받네요.
lazyload는 스크롤할때 다운로드 되어야 되는데.. 그게 작동 안하고 그냥 전부 다운 받아버리네요.
(레이지 로딩 개념도 잘몰랐고.)
지원되는 것이 많은 데 몰라서 못쓰는것도 많습니다.
한번 체크해 봐야겠습니다.
정말 간단하게 적용할 수 있을 것 같은데요!
처음에 테스트해 보니, 안되서, 그냥 놔두었는데..
일단 이미지가 올라가면 webp로 변환되면서
img.hacpai.com 이라는 CDN으로 가는 것 같습니다.
그리고 lazyloading도 자제적으로 뭔가 작업한 것 같습니다.
vditor로 업로드 시 썸네일 작업을 하지 않는게 조금 아쉽네요.
원본이 그대로 올라가니...
그리고 클릭했을 때 원본이 팝업으로 나오면 좋겠는데 그건 좀 어렵겠죠 ㅠㅠ
그 랜더링 되는 화면이 엄청 작은데요.
거기에 이미 이미지가 있다고 판단되어서 로딩이 되는게 아닌가 생각해봅니다.
구조적으로 이미지가 다 보여진다는 것이라고 생각합니다.
그리고 지금 테스트해보니, 레이지 로딩이 되는 것 같습니다.
로컬이라서 워낙 빠르게 나타나서..
스크롤을 하지 않고 디벨러퍼로 보니 화면에 나타나지 않은 이미지는 모두 loading 이미지로 되어 있네요..
어떻게 확인하나 했는데, 이런식으로 확인이 가능하네요
더블 체크 부탁드립니다.
[http://sir.kr/data/editor/2008/5c67853605b299987e3bbe8c33dd1032_1596257274_4199.gif]
여기에 올려놨듯이
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로 하는게 좋습니다.
https://www.wsgvet.com/home/589
여기에 정리해뒀어요!
예를 들어 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"/>';
}
요기 참조요