크롬80버전 결제 이슈, 영카트5 주요패치 확인!

그누보드5.4에 lazyload 적용하는 방법 > 그누보드5 팁자료실

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 팁자료실

그누보드5.4에 lazyload 적용하는 방법 정보

그누보드5.4에 lazyload 적용하는 방법

본문

0. 들어가며

 

lazyload는 밑에 스샷처럼 이미지가 보여질 때 다운 받게 해주는 도구입니다.

 

3535239587_1596207992.434.gif

 

위와 같이 스크롤 할때 이미지가 다운 받아지는 것을 확인할 수 있습니다.

 

이미지가 엄청나게 많을 때 트래픽에도 도움이 되고, 보는 사람 입장에서도 상당히 쾌적하게 느껴집니다.

 

예시링크  그누보드 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>

 

위와 같은 형태가 되겠죠?

 

혹시 파일을 다운받지 않고 그냥 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로 변경

추천10

댓글 전체

홈 서버~~~ 웬지 있어보이는 단어같아요 ^^
저희 집 시놀로지는... 제가 쓰고 싶어 샀는데....
마눌님의 잡다한 저장소가 되었쬬~~~
마눌님의 백만원짜리 D 드라이브가 되었어요 ㅠㅠ
그래도 쓰고 있으니 밥값하는거죠 ㅎㅎ

전 홈서버로 100% 홈페이지만 돌려요 ㅎㅎ 하드도 5TB 들어있는데 그냥 홈페이지 백업만 ㅎㅎ
Vditor에 lazyLoad가 내장 되어 있는데, 그누보드에서 헤드만 넣고 한번 테스트 부탁드립니다.

이미지 들어가는 곳은 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',
lazyload js 안넣고

그냥 뷰스킨에만


<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쪽 관련 자료가 많이 없네요.
로딩 이미지만 넣으면 동작하네요..

lang: 'ko_KR', 아래에 저 옵션 넣어 보세요.  이미지는 적당한 것으로 넣으시고.

로컬에서 테스트하니 순간적으로 나왔다가 없어지네요. 

그 순간 로딩 아이콘은 봤습니다.
음.. 로딩 아이콘은 저도 나오는데요.

실제로 개발자 모드의 network에 들어가니 그냥 전부 다운로드 받네요.

lazyload는 스크롤할때 다운로드 되어야 되는데.. 그게 작동 안하고 그냥 전부 다운 받아버리네요.
예.  그런것 같습니다.  그래서 서버쪽에서 뭔가 해줘야 되는지 알아서 그냥 지워놨던 것인데..
(레이지 로딩 개념도 잘몰랐고.)

지원되는 것이 많은 데 몰라서 못쓰는것도 많습니다.

한번 체크해 봐야겠습니다.
@우성짱 https://hacpai.com/article/1595921029800  여기를  접속해 보면 레이지 로딩이 되고 있는데....

처음에 테스트해 보니, 안되서,  그냥 놔두었는데..
여기 보니 그누보드와는 구조 자체가 다르네요.

일단 이미지가 올라가면 webp로 변환되면서

img.hacpai.com 이라는 CDN으로 가는 것 같습니다.

그리고 lazyloading도 자제적으로 뭔가 작업한 것 같습니다.

vditor로 업로드 시 썸네일 작업을 하지 않는게 조금 아쉽네요.

원본이 그대로 올라가니...

그리고 클릭했을 때 원본이 팝업으로 나오면 좋겠는데 그건 좀 어렵겠죠 ㅠㅠ
제 생각엔 그누보드에는 rendering이 되잖아요?

그 랜더링 되는 화면이 엄청 작은데요.

거기에 이미 이미지가 있다고 판단되어서 로딩이 되는게 아닌가 생각해봅니다.

구조적으로 이미지가 다 보여진다는 것이라고 생각합니다.
https://hacpai.com/article/1595921029800 사이트가 그렇게 되어 있죠.. 그것이 에디터 기능인지 아니면 다른 것으로 처리했는지는 알아 봐야 겠네요.

그리고 지금 테스트해보니,  레이지 로딩이 되는 것 같습니다.
로컬이라서 워낙 빠르게 나타나서..

스크롤을 하지 않고 디벨러퍼로 보니 화면에 나타나지 않은 이미지는 모두 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이 됩니다.

특이하게 모바일에서는 잘 되네요. ㅎㅎ
테스트 해보니 웹브라우저 높이에 따라서 불러오고 안불러오고 차이가 있네요.

F5 보다는 컨트롤 + F5를 하면 확실히 알 수 있네요 ㅎㅎ
제 크롬 브라우저를 풀 화면으로 놓고 있어도 제일 아래에 있는 gif 세개는 로딩이 안되고 있습니다.  이미지 큰것은 유머게시판의 세단 뛰기 3개의 파일이 사이즈가 커서 그것을 제일 하단에 넣고 테스트 중입니다.
제 모니터가 커서 그런걸까요?

2560 x 1440 이거든요.

높이를 조금만 줄여도 잘 됩니다.

하지만 풀 화면에서 컨트롤 + F5를 하면 전부 로딩이 되더라구요
제것은 full-hd입니다. 4K monitor가 없다 보니.. 긴 글 쓰기 귀찮아서
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를 좀 만지면 될 것 같기도 합니다.
@우성짱  upload.php도 수정해야 됩니다.  음성 녹음 기능이 있는 데 사용을 못하고 있습니다.
thumbnail.lib.php는 그누보드에서 해주면 될것 같습니다.

html이 렌더링이 끝난 후에

transform(html) {
      // 이미지 태그 찾아서
      //  접속된 디바이스에 맞는 thumbnail을 만들고 
      // 이미지 링크에 썸네일과 원본이미지를 넣어주고
      return html;  하시면 됩니다.
}

대략 동작은 이렇습니다.  현재 열심히 정규식을 배우고 있습니다.
네 맞습니다.
id는 페이지에서 유일한 값이어야 하는데 첨부이미지는 여러장 업로드하기 때문에 class로 하는게 좋습니다.
전체 1,714 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여26 회 시작20.08.05 04:15 종료20.08.12 04:15
  2. 참여21 회 시작20.08.04 00:57 종료20.08.11 00:57

(주)에스아이알소프트 (06212) 서울시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT