그림 게으름 플러그인lazyload 사용 예시

4085 단어
예시
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">  
  <title>demo</title>  
  
  <script src="../js/jquery-1.11.3.min.js"></script>  
  <script src="js/jquery.lazyload.min.js"></script>  
  
  <style>  
    * {margin: 0; padding: 0;}  
    body,html {width: 100%; height: 100%;}  
    .a3 {  
      width: 500px; height: 400px; overflow: auto;  
    }  
    .container  {width: 9000px; height: 100px;}  
    img {background: url(../images/reload.gif) no-repeat center;}
  </style>  
</head>  
<body>  
    <div class="a3">  
      <div class="container">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a1.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a2.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a3.png">  
          <img src="../images/reload.gif" class="img1" width="300" height="300" data-original="../images/a4.png">  
      </div>  
    </div>
<script>  
    $(function() {  
        //   data-original    src ,         
        //              ,          ,        ,          
        $('.img1').lazyload({  
            threshold: 200,//           200           ,            
            effect: 'fadeIn',//show fadeIn slideDown  
            //placeholder: '',//            , image.load.gif,       ,    css           src=reload.gif   ,               
            container: $(".a3"),//       div,          
        });  
  
  
    });
</script>  
</body>  
</html>

좋은 웹페이지 즐겨찾기