图片延迟加载效果实现-前端--易笔记

当页面中图片数量很多的时候，如果要求页面加载完成的时候将图片全部显示出来，那么会让用户觉得“网速好渣/网页好渣”，于是，使得尚未出现在用户视区的图片暂时隐藏起来减少页面一开始的加载时间不为是一种好办法。

原生js:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="height:1290px;width:800px;border:1px;background:gray;"></p> 
  <p style="height:150px;width:800px;border:1px;background:green;"></p> 
    <!--<img class="lazy"  alt="img/award.jpg" />--> 
    <p style="height:1290px;width:800px;border:1px;background:gray;"></p> 
    <img class="lazy" alt="img/header-background.jpg"/>
    <script type="text/JavaScript"><!-- 
      var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了） 
      window.onscroll = function() { //当发生滚动时
      var imgElements = document.getElementsByTagName("img"); 
      var lazyImgArr = new Array(); 
      var j = 0; 
      for(var i=0; i<imgElements.length; i++) { 
       if(imgElements[i].className == "lazy"){ 
        lazyImgArr[j++] = imgElements[i]; 
       } 
      } 
       var scrollHeight = document.body.scrollTop;//滚动的高度 
      var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度，可见部分就是刨去那些隐藏起来的部分 
      // var bodyHeight = document.body.scrollHeight;//body整个页面的高度（全文的高度）
      // var bodyHeight = window.innerHeight;//窗口的高度
   console.log(bodyHeight);
      if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。 
       for(var k=0; k<lazyImgArr.length; k++) { 
      var imgTop = lazyImgArr[k].offsetTop;//图片距离页面顶端的高度 
      console.log(imgTop);
      if((imgTop - scrollHeight) <= bodyHeight) { 
       lazyImgArr[k].src = lazyImgArr[k].alt; 
       lazyImgArr[k].className = "notlazy"
       } 
        } 
        temp = scrollHeight; 
      } 
    }; 
   </script> 
</body>
</html>

时间：2017/8/30 9:28:00