jQuery lazy load 최신글, 목록스킨, 내용스킨에 적용하기

Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

jQuery lazy load 최신글, 목록스킨, 내용스킨에 적용하기

9 우성군 2 142 1 0

도사님 글에 추가적인 내용입니다.


http://amina.co.kr/bbs/board.php?bo_table=tip&wr_id=2529 


도사님 글은 내용스킨에만 적용하는 것인데


저는 최신글 및 목록스킨에도 적용하는 방법을 적어보겠습니다.


일단 js 파일 스크립트를 테마 루트에 있는 head.php로 옮겨야 합니다.



1. 최신글 스킨


미소 베이직 기준으로 말씀드립니다.


miso-post-slider을 예를들면


/thema/Miso-Basic-4/widget/miso-post-slider/widget.rows.php 


위 파일에서 92번째 줄을 보면


<div class="img-item">


<img <?php echo $img_src;?> alt="<?php echo $list[$i]['img']['alt'];?>" class="wr-img">


위와 같은 내용이 있는데요.


<div class="img-item">


<img src="../img/giphy.gif" data-original="<?php echo $list[$i]['img']['src'];?>" alt="<?php echo $list[$i]['img']['alt'];?>" id="lazy" class="wr-img">


위와 같이 변경하면 됩니다.



다른 위젯들도 똑같이 변경하면 됩니다.



2. 게시판 목록스킨


저는 basic-board의  basic-webzine 목록스킨을 사용하는데요


/skin/board/Basic-Board-2.0/list/basic-webzine/list.skin.php


위 파일에서 142번째 줄을 보면


$wr_thumb = ($thumb['src']) ? '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';


위와 같은 내용을


$wr_thumb = ($thumb['src']) ? '<img src="../img/loading.gif" data-original="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img" id="lazy">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';


위와 같이 변경하면 됩니다.  ㅎㅎ



좀더 상세한 내용은


https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=589 


여기 좀더 적어놨습니다~!


제 홈페이지에 전체 적용해놨으니 한번 놀러오세용~

2 Comments
1 FB맨 05.27 16:36  
좋은 정보 감사드립니다!
9 우성군 05.27 17:29  
감사합니다~! 
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand