반응형
[jQuery] 무한 스크롤 이벤트
| srcollEvent.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>무한 스크롤 이벤트</title> <style type="text/css"> img { display:block; width:100px; height:100px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function getImage() { for(var i = 0;i <= 9; i++) { jQuery("#imageListDiv").append("<img src=images/" + i + ".jpg>"); } } jQuery(document).ready(function() { getImage(); //scroll : 스크롤 사용시 발생되는 이벤트 jQuery(window).scroll(function(){ var docH=$(document).height(); var scrollH = jQuery(window).height() + jQuery(window).scrollTop(); if(scrollH>=docH) { getImage(); } }); }); </script> </head> <body> <h1>무한스크롤</h1> <hr/> <div id="imageListDiv"></div> </body> </html> |
| 출력결과 |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 이미지 출력 및 숨기기 (0) | 2016.01.03 |
|---|---|
| [jQuery] 움직이는 이미지 (0) | 2016.01.03 |
| [jQueyr] On / Off 이벤트 (0) | 2016.01.03 |
| [jQuery] input 이벤트 (0) | 2015.12.29 |
| [jQuery] checkbox 이벤트 (1) | 2015.12.29 |
