그누보드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
11
댓글 51개
우왕... 신기하네요~~~~~
저는 홈서버 운영하면서 트래픽 절감에 도움이 많이 됐습니다. ㅎㅎ
홈 서버~~~ 웬지 있어보이는 단어같아요 ^^
저희 집 시놀로지는... 제가 쓰고 싶어 샀는데....
마눌님의 잡다한 저장소가 되었쬬~~~
마눌님의 백만원짜리 D 드라이브가 되었어요 ㅠㅠ
저희 집 시놀로지는... 제가 쓰고 싶어 샀는데....
마눌님의 잡다한 저장소가 되었쬬~~~
마눌님의 백만원짜리 D 드라이브가 되었어요 ㅠㅠ
그래도 쓰고 있으니 밥값하는거죠 ㅎㅎ
전 홈서버로 100% 홈페이지만 돌려요 ㅎㅎ 하드도 5TB 들어있는데 그냥 홈페이지 백업만 ㅎㅎ
전 홈서버로 100% 홈페이지만 돌려요 ㅎㅎ 하드도 5TB 들어있는데 그냥 홈페이지 백업만 ㅎㅎ
Vditor에 lazyLoad가 내장 되어 있는데, 그누보드에서 헤드만 넣고 한번 테스트 부탁드립니다.
이미지 들어가는 곳은 view.skin.php에서 anchor: 1, 근처 아무곳에 넣어서 테스트 부탁드립니다.
lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',
이것을 넣어주면 됩니다.
이미지 들어가는 곳은 view.skin.php에서 anchor: 1, 근처 아무곳에 넣어서 테스트 부탁드립니다.
lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',
이것을 넣어주면 됩니다.
헤드만 넣는다는 말이 무슨 말인지 잘 모르겠습니다.
로딩 이미지는 어디에 넣어야 할까요?
로딩 이미지는 어디에 넣어야 할까요?
2. head.sub.php 파일 수정하기
3. 이미지 들어가는 곳은 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',
anchor: 1, 라는 것 자체가 없습니다.
basic-md에도 없습니다. 흠...
basic-md에도 없습니다. 흠...
lazyload js 안넣고
그냥 뷰스킨에만
이렇게 넣어봤는데 안되네요.
헤드에도 lazyload 넣어봤는데 안되네요 흠...
그냥 뷰스킨에만
<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 넣어봤는데 안되네요 흠...
head.sub.php에 들어가는 코드가 지금 보니 jquery이네요. 서버쪽에서 뭔가 해줘야 될 것 같았는데, 그것이 아닌것 같네요.. 개발쪽은 서버쪽이 자바나 고랭이라서..
PHP쪽 관련 자료가 많이 없네요.
PHP쪽 관련 자료가 많이 없네요.
그렇군요... 자체적으로 내장되어 있다는데.. 활용하면 좋을 것 같은데요.
방법을 찾아봐야겠습니다.
방법을 찾아봐야겠습니다.
로딩 이미지만 넣으면 동작하네요..
lang: 'ko_KR', 아래에 저 옵션 넣어 보세요. 이미지는 적당한 것으로 넣으시고.
로컬에서 테스트하니 순간적으로 나왔다가 없어지네요.
그 순간 로딩 아이콘은 봤습니다.
lang: 'ko_KR', 아래에 저 옵션 넣어 보세요. 이미지는 적당한 것으로 넣으시고.
로컬에서 테스트하니 순간적으로 나왔다가 없어지네요.
그 순간 로딩 아이콘은 봤습니다.
음.. 로딩 아이콘은 저도 나오는데요.
실제로 개발자 모드의 network에 들어가니 그냥 전부 다운로드 받네요.
lazyload는 스크롤할때 다운로드 되어야 되는데.. 그게 작동 안하고 그냥 전부 다운 받아버리네요.
실제로 개발자 모드의 network에 들어가니 그냥 전부 다운로드 받네요.
lazyload는 스크롤할때 다운로드 되어야 되는데.. 그게 작동 안하고 그냥 전부 다운 받아버리네요.
예. 그런것 같습니다. 그래서 서버쪽에서 뭔가 해줘야 되는지 알아서 그냥 지워놨던 것인데..
(레이지 로딩 개념도 잘몰랐고.)
지원되는 것이 많은 데 몰라서 못쓰는것도 많습니다.
한번 체크해 봐야겠습니다.
(레이지 로딩 개념도 잘몰랐고.)
지원되는 것이 많은 데 몰라서 못쓰는것도 많습니다.
한번 체크해 봐야겠습니다.
그렇네요. 잘 되면 좋은데 아쉬워요!
정말 간단하게 적용할 수 있을 것 같은데요!
정말 간단하게 적용할 수 있을 것 같은데요!
@우성짱 https://hacpai.com/article/1595921029800 여기를 접속해 보면 레이지 로딩이 되고 있는데....
처음에 테스트해 보니, 안되서, 그냥 놔두었는데..
처음에 테스트해 보니, 안되서, 그냥 놔두었는데..
여기 보니 그누보드와는 구조 자체가 다르네요.
일단 이미지가 올라가면 webp로 변환되면서
img.hacpai.com 이라는 CDN으로 가는 것 같습니다.
그리고 lazyloading도 자제적으로 뭔가 작업한 것 같습니다.
vditor로 업로드 시 썸네일 작업을 하지 않는게 조금 아쉽네요.
원본이 그대로 올라가니...
그리고 클릭했을 때 원본이 팝업으로 나오면 좋겠는데 그건 좀 어렵겠죠 ㅠㅠ
일단 이미지가 올라가면 webp로 변환되면서
img.hacpai.com 이라는 CDN으로 가는 것 같습니다.
그리고 lazyloading도 자제적으로 뭔가 작업한 것 같습니다.
vditor로 업로드 시 썸네일 작업을 하지 않는게 조금 아쉽네요.
원본이 그대로 올라가니...
그리고 클릭했을 때 원본이 팝업으로 나오면 좋겠는데 그건 좀 어렵겠죠 ㅠㅠ
제 생각엔 그누보드에는 rendering이 되잖아요?
그 랜더링 되는 화면이 엄청 작은데요.
거기에 이미 이미지가 있다고 판단되어서 로딩이 되는게 아닌가 생각해봅니다.
구조적으로 이미지가 다 보여진다는 것이라고 생각합니다.
그 랜더링 되는 화면이 엄청 작은데요.
거기에 이미 이미지가 있다고 판단되어서 로딩이 되는게 아닌가 생각해봅니다.
구조적으로 이미지가 다 보여진다는 것이라고 생각합니다.
https://hacpai.com/article/1595921029800 사이트가 그렇게 되어 있죠.. 그것이 에디터 기능인지 아니면 다른 것으로 처리했는지는 알아 봐야 겠네요.
그리고 지금 테스트해보니, 레이지 로딩이 되는 것 같습니다.
로컬이라서 워낙 빠르게 나타나서..
스크롤을 하지 않고 디벨러퍼로 보니 화면에 나타나지 않은 이미지는 모두 loading 이미지로 되어 있네요..
어떻게 확인하나 했는데, 이런식으로 확인이 가능하네요
더블 체크 부탁드립니다.
그리고 지금 테스트해보니, 레이지 로딩이 되는 것 같습니다.
로컬이라서 워낙 빠르게 나타나서..
스크롤을 하지 않고 디벨러퍼로 보니 화면에 나타나지 않은 이미지는 모두 loading 이미지로 되어 있네요..
어떻게 확인하나 했는데, 이런식으로 확인이 가능하네요
더블 체크 부탁드립니다.
레이지 로딩 확인(구글 디벨로퍼)
https://aced.ga/free/vditor-%EB%82%B4%EC%9E%A5-lazyload-%ED%85%8C%EC%8A%A4%ED%8A%B8/
여기에 올려놨듯이
lazyloading이 됩니다.
그런데 문제는 뭐냐면 처음에 랜더링할때 화면이 작아서
웹브라우저에서는 아무리 이미지가 많아도,
작은 랜더링 화면 안에 수백개의 이미지가 다 들어있다고 판단하는 것 같습니다.
제가 방금 극단적으로 웹브라우저 높이를 작게해보니 잘 됩니다.
즉, 처음 랜더링할 때 그 화면을 브라우저에서 보고 있으면 모든 이미지를 한번에 로딩하는 것이고,
웹브라우저를 극단적으로 줄이면 랜더링화면을 안보니
랜더링 이후에 보면 이미지가 정상적으로 출력되니 그때는 lazyloading이 잘 되는 것입니다.
랜더링때 실제 게시글의 높이만큼 화면이 보여지면 문제가 해결될 것 같습니다.
하지만 지금 상황에서는 랜더링 할때 계산 후 게시글의 높이가 정해지니, lazyloading이 안되는 것 같습니다.
여기에 올려놨듯이
lazyloading이 됩니다.
그런데 문제는 뭐냐면 처음에 랜더링할때 화면이 작아서
웹브라우저에서는 아무리 이미지가 많아도,
작은 랜더링 화면 안에 수백개의 이미지가 다 들어있다고 판단하는 것 같습니다.
제가 방금 극단적으로 웹브라우저 높이를 작게해보니 잘 됩니다.
즉, 처음 랜더링할 때 그 화면을 브라우저에서 보고 있으면 모든 이미지를 한번에 로딩하는 것이고,
웹브라우저를 극단적으로 줄이면 랜더링화면을 안보니
랜더링 이후에 보면 이미지가 정상적으로 출력되니 그때는 lazyloading이 잘 되는 것입니다.
랜더링때 실제 게시글의 높이만큼 화면이 보여지면 문제가 해결될 것 같습니다.
하지만 지금 상황에서는 랜더링 할때 계산 후 게시글의 높이가 정해지니, lazyloading이 안되는 것 같습니다.
제 스샷을 보면 이해되실 듯 합니다.
지금 새로고침할 때 빈 화면을 웹브라우저가 보면 모든 이미지가 로딩이 되고
빈화면을 웹브라우저가 보질 않으면 lazyloading이 됩니다.
특이하게 모바일에서는 잘 되네요. ㅎㅎ
테스트 해보니 웹브라우저 높이에 따라서 불러오고 안불러오고 차이가 있네요.
F5 보다는 컨트롤 + F5를 하면 확실히 알 수 있네요 ㅎㅎ
F5 보다는 컨트롤 + F5를 하면 확실히 알 수 있네요 ㅎㅎ
제 크롬 브라우저를 풀 화면으로 놓고 있어도 제일 아래에 있는 gif 세개는 로딩이 안되고 있습니다. 이미지 큰것은 유머게시판의 세단 뛰기 3개의 파일이 사이즈가 커서 그것을 제일 하단에 넣고 테스트 중입니다.
제 모니터가 커서 그런걸까요?
2560 x 1440 이거든요.
높이를 조금만 줄여도 잘 됩니다.
하지만 풀 화면에서 컨트롤 + F5를 하면 전부 로딩이 되더라구요
2560 x 1440 이거든요.
높이를 조금만 줄여도 잘 됩니다.
하지만 풀 화면에서 컨트롤 + F5를 하면 전부 로딩이 되더라구요
제것은 full-hd입니다. 4K monitor가 없다 보니.. 긴 글 쓰기 귀찮아서
https://hacpai.com/article/1595921029800 여기것 copy & paste하고
사진 키워서 모두 다운로드 해서 같은 자리에 넣고 테스트했습니다.
로컬이라서 제일 마지막에 3단 뛰기 gif 이미지 넣고 테스트했습니다.
ctrl+f5를 눌러도 제일 마지막은 아직도 로딩 아이콘으로 남아 있습니다.
https://hacpai.com/article/1595921029800 여기것 copy & paste하고
사진 키워서 모두 다운로드 해서 같은 자리에 넣고 테스트했습니다.
로컬이라서 제일 마지막에 3단 뛰기 gif 이미지 넣고 테스트했습니다.
ctrl+f5를 눌러도 제일 마지막은 아직도 로딩 아이콘으로 남아 있습니다.
글 없이 사진만 있어서 그럴 수도 있으니..
일단 되기는 되는 것 같습니다.
일단 되기는 되는 것 같습니다.
https://aced.ga/free/vditor-%EB%82%B4%EC%9E%A5-lazyload-%ED%85%8C%EC%8A%A4%ED%8A%B8/
글을 많이 넣고 이미지를 넣어보니 정상 작동합니다.
원래 극단적으로 이미지만 전부 있는 경우는 드무니 충분히 잘 작동한다고 볼 수 있겠습니다. ㅎㅎ
이미지의 경우 그누보드 thumbnail.lib.php로 썸네일 만들면 좋지 않을까요?
그건 힘들겠죠?...
그리고 클릭하면 원본 팝업되면 더 좋을 것 같은데..
그러면 이미지 쪽도 거의 완벽하다고 볼 수 있겠습니다.
에디터의 upload.php를 좀 만지면 될 것 같기도 합니다.
글을 많이 넣고 이미지를 넣어보니 정상 작동합니다.
원래 극단적으로 이미지만 전부 있는 경우는 드무니 충분히 잘 작동한다고 볼 수 있겠습니다. ㅎㅎ
이미지의 경우 그누보드 thumbnail.lib.php로 썸네일 만들면 좋지 않을까요?
그건 힘들겠죠?...
그리고 클릭하면 원본 팝업되면 더 좋을 것 같은데..
그러면 이미지 쪽도 거의 완벽하다고 볼 수 있겠습니다.
에디터의 upload.php를 좀 만지면 될 것 같기도 합니다.
@우성짱 upload.php도 수정해야 됩니다. 음성 녹음 기능이 있는 데 사용을 못하고 있습니다.
thumbnail.lib.php는 그누보드에서 해주면 될것 같습니다.
html이 렌더링이 끝난 후에
transform(html) {
// 이미지 태그 찾아서
// 접속된 디바이스에 맞는 thumbnail을 만들고
// 이미지 링크에 썸네일과 원본이미지를 넣어주고
return html; 하시면 됩니다.
}
대략 동작은 이렇습니다. 현재 열심히 정규식을 배우고 있습니다.
thumbnail.lib.php는 그누보드에서 해주면 될것 같습니다.
html이 렌더링이 끝난 후에
transform(html) {
// 이미지 태그 찾아서
// 접속된 디바이스에 맞는 thumbnail을 만들고
// 이미지 링크에 썸네일과 원본이미지를 넣어주고
return html; 하시면 됩니다.
}
대략 동작은 이렇습니다. 현재 열심히 정규식을 배우고 있습니다.
제가 코드 쪽은 잘 몰라서 적용하기는 어렵겠네요 ㅠㅠ
잘 부탁드립니다. 기다릴게요 ㅎㅎ
잘 부탁드립니다. 기다릴게요 ㅎㅎ
지금 에디터에 집중하고 있어서..
넵 급한건 아닙니다.
에디터가 더 중요하니..
나중에 시간나면 부탁드립니다. ㅎㅎ
에디터가 더 중요하니..
나중에 시간나면 부탁드립니다. ㅎㅎ
오오 좋은 정보네요!! 감사합니다
넵. 감사합니다!
좋네요 ㅎㅎㅎ 시간내서 한번 적용해봐야겠어요
넵 ㅎㅎ 이미지가 많다면 트래픽에 굉장히 도움이 많이 될 것 같습니다!
오우... 당장 적용해봐야겠네요~!
넵 정말 좋아요
사용중인데 좋습니다.
참고로 id보다는 class 를 사용하는게 좋을듯 합니다.
참고로 id보다는 class 를 사용하는게 좋을듯 합니다.
자바스크립트에
img.lazy 로 바꾸고
썸네일 불러올때
class=lazy
이렇게 넣으면 될까요?
img.lazy 로 바꾸고
썸네일 불러올때
class=lazy
이렇게 넣으면 될까요?
네 맞습니다.
id는 페이지에서 유일한 값이어야 하는데 첨부이미지는 여러장 업로드하기 때문에 class로 하는게 좋습니다.
id는 페이지에서 유일한 값이어야 하는데 첨부이미지는 여러장 업로드하기 때문에 class로 하는게 좋습니다.
감사합니다. 수정했습니다.
감사합니다.
감사합니다.
아미나에서는 적용 불가한가요 ?
감사합니다.
혹시 이미지 절대 경로를 변경하고 싶은데요..
예를 들어 abc.com/data <- 여기 폴더 이미지 파일을
test.abc.com/data <- 이런 주소 형식으로 바꿔서 출력하고 싶습니다.
어렵네요..ㅠㅠ
예를 들어 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"/>';
}
요기 참조요
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"/>';
}
요기 참조요
@우성짱 넵 감사합니다.
최신갤러리와 갤러리 에 모두 적용이 되는건가요? 적용해 보았는데 되는건지 안되는건지 확인을 어떻게 해야할지 몰라서요.
