懒加载了解一下

125 阅读1分钟

日常懒一下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <script>      /*      * clientHeihgt:浏览器窗口高度       scrollHeight:页面高度       scrollTop:滚动距离       浏览器窗口高度与页面高度是不变的,随着页面往下移动,       滚动距离会越来越大,当滚动到最底部时,       滚动距离+窗口高度=页面高度       * */      window.onscroll = function (){        var marginBot = 0;        if (document.documentElement.scrollTop){            //IE、火狐浏览器            marginBot = document.documentElement.scrollHeight-                    document.documentElement.scrollTop-                    document.documentElement.clientHeight;        } else {            //谷歌浏览器            marginBot = document.body.scrollHeight-                    document.body.scrollTop-                    document.documentElement.clientHeight;        }         if(marginBot<=0) {            //alert("滚动到底部");           addimg(); //加载图片        }     }           function addimg(){         var html="<li><img src='img/6.jpg'></li>";         document.getElementById("imgs").innerHTML +=html;     }  </script> </head> <body>  <ul id="imgs">      <li><img src="img/1.jpg" width="380" height="285" border="0" alt=""></li>      <li><img src="img/2.jpg" width="380" height="285" border="0" alt=""></li>      <li><img src="img/3.jpg" width="380" height="285" border="0" alt=""></li>      <li><img src="img/4.jpg" width="380" height="285" border="0" alt=""></li>      <li><img src="img/5.jpg" width="435" height="466" border="0" alt=""></li>  </ul> </body></html>