图片懒加载

2024年3月11日 103次阅读 来源: 华域 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>lazyLoad</title>
<style type="text/css" media="all"> 
  * {
    margin: 0;
    padding: 0;
  }
  #wapper {
    width: 520px;
    margin: 30px auto;
    border: 1px solid red;
    overflow: hidden;
  }

  li {
    width: 160px;
    height: 160px;
    float: left;
    list-style: none;
    margin: 5px;
    background: url(http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif) center center no-repeat;
    border: 1px dashed #cccccc;
  }
  img{
    width:100%
  }
</style>
</head>
<body>
   <div id="wapper">
    <ul>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
      <li data-src="http://img.sccnn.com/simg/341/11818.jpg"></li>
    </ul>
  </div>
<script>
  window.onload = function () {
    window.onscroll();
  };
  window.onscroll = function () {
    var oDiv = document.getElementById('wapper');
    var oUl = oDiv.children[0];
    var aLi = oUl.children;

    for (var i = 0, l = aLi.length; i < l; i++) {
      var oLi = aLi[i];
      //搜检oLi是不是在可视地区
      var H = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
      var liTop = getH(oLi);
      if (liTop < H) {
        setTimeout("setImg(" + i + ")", 500);
      }
      console.log(i);
    }
  };
  function setImg(index){
    var oDiv=document.getElementById("wapper")
    var oUl=oDiv.children[0];
    var aLi=oUl.children;
    if (aLi[index].dataset) {
      var src=aLi[index].dataset.src;
    } else{
      var src=aLi[index].getAttribute('data-src');
    }
    var oImg=document.createElement('img');
    oImg.src=src;
    if (aLi[index].children.length==0) {
      aLi[index].appendChild(oImg); 
    }
  }
  //取得对象间隔页面顶端的间隔  
  function getH(obj) {  
    var h = 0;  
    while (obj) {  
      h += obj.offsetTop;  
      obj = obj.offsetParent;  
    }
    return h;  
  }  
</script>
</body>
</html>
    原文作者：华域
    原文地址: https://segmentfault.com/a/1190000018793774
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞