homework/张媛/懒加载 imgs/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>img-lazyload</title>
<style>
  .container{
    width:960px;
    margin: 0 auto;
    background-color: #eee;
  }
  ul{
    list-style: none;
    margin:0;
    padding:0;
  }
  .clearfix:after{
    content:'';
    clear:both;
    display:block;
  }
  li{
    float:left;
    margin:10px;
  }
</style>
</head>
<body>
  <div class="container">
    <ul class="clearfix ">

      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=1"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=2"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=3"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=4"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=5"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=6"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=7"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=8"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=9"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=10"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=11"  alt="" /></a></li>
      <li><a href="##"><img src="" data-src="http://unsplash.it/300/500?random=12"  alt="" /></a></li>

    </ul>

  </div>


  	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    check();
  	$(window).on('scroll', check);

  	function check(){
  		$('.container img').not('.load').each(function(){
  			if(isShow($(this))){
  				showImg($(this));
  			}
  		});
  	}

  	function isShow($e){
  	  var scrollH = $(window).scrollTop(),
  	  	  winH = $(window).height(),
  	  	  top = $e.offset().top;

    	  if(top < winH + scrollH){
    	  	return true;
    	  }else{
    	  	return false;
    	  }
  	}

  	function showImg($e){
        console.log($e);
        $e.attr('src', $e.attr('data-src'));
        $e.addClass('load');
  	}


  	</script>
</body>
</html>