우성군	0	300 0	07.31 23:45
주소복사 : https://www.wsgvet.com/home/641
https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=589 + 8 https://github.com/tuupola/lazyload/releases + 4 2020.08.01 18:40 lazyload.zip (32.9K) + 1
그누보드 5.4는 그누보드 5.3과 조금 다릅니다. 그래서 따로 글을 올려봅니다.
그누보드 5.3 아미나 빌더에서 Lazyload 적용하는 방법은
https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=589
2. Lazyload 최신버전 다운로드
필요한 파일들은 직접 다운 받거나 CDN을 통해서 링크만으로 적용 가능합니다.
우선 다운 받으려면
또는 첨부한 압축파일에도 있습니다.
그리고 loading용 gif 파일과 투명배경 파일도 같이 첨부파일에 있습니다.
trans-wide.png 는 3000 X 553 투명파일입니다.
특이하게 나리야에서는 로딩 파일 가로 기준으로 이미지가 출력이 되더라구요. 되도록이면 trans-wide.png 파일이 나을 것 같습니다.
다운받은 jquery.lazyload.min.js 와 loading 파일을 적정 위치에 넣습니다.
jquery.lazyload.min.js 파일을 CDN으로 편하게 쓰시려면 다운 받지 않아도 됩니다. 밑에 글에 추가하여 설명드립니다.
다만 로딩파일의 경우 CDN이 있지만 이미지 가로폭이 로딩파일과 같은 버그가 있어 추천드리진 않습니다.
3. head.sub.php 파일 수정하기
/theme/NB-Basic/head.sub.php 121번째 줄에 있는
<script src="<?php echo NA_URL ?>/js/jquery-3.5.1.min.js"></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>
위와 같이 붙여넣으면 끝입니다.
이제 테마 전영역에서 lazyload를 사용할 수 있습니다.
4. thumbnail.lib.php 파일 수정하기
/lib/thumbnail.lib.php 188번째줄 ~ 192번째 줄
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'"/>';
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'"/>';
$thumb_tag = '<img src="'.G5_URL.'/img/trans-wide.png" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
$thumb_tag = '<img src="'.G5_URL.'/img/trans-wide.png" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
투명 배경이 아닌 loading.gif를 원하시면
$thumb_tag = '<img src="'.G5_URL.'/img/loading.gif" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
$thumb_tag = '<img src="'.G5_URL.'/img/loading.gif" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
CDN에 있는 loding 파일을 사용하려면
$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.'"/>';
$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"/>';
위와 같이 넣으면 되는데요.
그런데 나리야 빌더에서는 로딩파일의 가로폭을 기준으로 이미지가 뜨는 버그가 있네요.
그래서 첨부파일에 trans-wide.png 파일을 이용하면 게시판 가로폭 100%로 출력이 됩니다.
또는 자신이 원하는 이미지 가로폭에 맞춰서 리사이즈 후 사용해도 됩니다.
2020-08-04 업데이트
lazy id를 lazy class로 변경
lazyload, 나리야, 그누보드5.4, 트래픽, 이미지
+45	2013.12.12	WD My Cloud 풀백업본 공유합니다.
2014.04.29	WD My Book Live에 가벼운 웹하드서비스 h5ai 설치하기
+59	2014.04.29	WD My Cloud에 가벼운 웹하드서비스 h5ai 설치하기