图片懒加载

r囧r小猫 2022-05-21 06:54 617阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>LazyLoad</title>
  6.     <style type="text/css">
  7.         img {
  8.             display: block;
  9.             width: 500px;
  10.             height: 400px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
  16.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg">
  17.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120">
  18.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg">
  19.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg">
  20.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg">
  21.     <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg">
  24.     <script type="text/javascript">
  25.         var aImg = document.querySelectorAll('img');
  26.         var len = aImg.length;
  27.         var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
  28.         window.onscroll = function() {
  29.             var seeHeight = document.documentElement.clientHeight;
  30.             var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  31.             for (var i = n; i < len; i++) {
  32.                 if (aImg[i].offsetTop < seeHeight + scrollTop) {
  33.                     if (aImg[i].getAttribute('src') == '') {
  34.                         aImg[i].src = aImg[i].getAttribute('guoyu-src');
  35.                     }
  36.                     n = i + 1;
  37.                     console.log('n = ' + n);
  38.                 }
  39.             }
  40.         };
  41.     </script>
  42. </body>
  43. </html>
      • CSS代码
      • HTML代码
      • JS代码
      • 完整代码

CSS代码

只是设置图片的一些样式：

  1. <style>
  2.     *{margin: 0;padding: 0;}
  3.     img{width: 50%;display: inline-block;border: 1px solid #ccc;float: left;}
  4. </style>

HTML代码

1.png是一个1*1px的透明图或者带有logo，这样加载快，测试效果的话无所谓，只要能区分开路径不一样就行，jpg 格式图是实际应该加载的图片路径，两个图显示的宽高要一致。data-url存放图片实际路径：

  1. <div id="div">
  2.     <div id="one">
  3.         <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/3.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/4.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/5.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> </div> <div id="two"> <img class="img" data-url="img/6.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/7.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/8.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> </div> </div>

JS代码

原理：滚动至#two内容显示出来时，让#two内的图片路径改为实际路径：

  1. <script>
  2.     //首次进入触发判断
  3.     getList();
  4.     function getList(){
  5.         //第一次显示的图片列表高度
  6.         var contentHeight = document.getElementById('one').offsetHeight;
  7.         //设备可用高度
  8.         var availHeight =  window.screen.availHeight;
  9.         //如果不滚动two直接被显示出来
  10.         if (contentHeight<availHeight){
  11.             //遍历#one下的img，然后替换路径
  12.             for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
  13.                 var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
  14.                 var img = new Image();
  15.                 img.src = imgUrl;
  16.                 //img.onload方法里如果不是自调用函数，x会为循环之后的最大值，而不是0，1，2...
  17.                 img.onload = (function(e){
  18.                     document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
  19.                 })();
  20.             }
  21.             //遍历#two，然后替换路径
  22.             for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){
  23.                 var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
  24.                 var img = new Image();
  25.                 img.src = imgUrl;
  26.                 img.onload = (function(e){
  27.                     document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
  28.                 })();
  29.             }
  30.         }else {
  31.             //遍历#one下的img，然后替换路径
  32.             for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
  33.                 var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
  34.                 var img = new Image();
  35.                 img.src = imgUrl;
  36.                 img.onload = (function(e){
  37.                     document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
  38.                 })();
  39.             }
  40.         }
  41.     }
  42.     //#two显示的次数 0是第一次显示
  43.     var twoShowTime = 0;
  44.     //滚动事件
  45.     window.onscroll = function(){
  46.         if (twoShowTime == 0){
  47.             scroll();
  48.         }
  49.     };
  50.     //滚动判断图片是否加载
  51.     function scroll() {
  52.         //#content的高度
  53.         var contentHeight = document.getElementById('one').offsetHeight;
  54.         //设备可用高度
  55.         var availHeight = window.screen.availHeight;
  56.         //滚动的高度
  57.         var scrollHeight = document.body.scrollTop;
  58.         //判断如果显示出来了#two
  59.         if (scrollHeight > contentHeight - availHeight) {
  60.             //遍历#two下的img，然后替换路径
  61.             for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) {
  62.                 var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
  63.                 var img = new Image();
  64.                 img.src = imgUrl;
  65.                 //img.onload方法里如果不是自调用函数，x会为循环之后的最大值，而不是0，1，2...
  66.                 img.onload = (function () {
  67.                     document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
  68.                 })();
  69.             }
  70.             twoShowTime = 1;
  71.         }
  72.     }
  73. </script>

完整代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
  6.     <title>图片懒加载</title>
  7. </head>
  8. <style>
  9.     *{margin: 0;padding: 0;}
  10.     img{width: 48%;height: 150px;display: inline;border: 1px solid #ccc;}
  11. </style>
  12. <body>
  13. <div id="div">
  14.     <div id="one">
  15.         <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/3.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/4.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/5.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> </div> <div id="two"> <img class="img" data-url="img/6.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/7.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/8.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> </div> </div> <script> //首次进入触发判断 getList(); function getList(){ //第一次显示的图片列表高度 var contentHeight = document.getElementById('one').offsetHeight; //设备可用高度 var availHeight = window.screen.availHeight; //如果不滚动two直接被显示出来 if (contentHeight<availHeight){ //遍历#one下的img，然后替换路径 for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){ var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); })(); } //遍历#two，然后替换路径 for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){ var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); })(); } }else { //遍历#one下的img，然后替换路径 for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){ var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); })(); } } } //#two显示的次数 0是第一次显示 var twoShowTime = 0; //滚动事件 window.onscroll = function(){ if (twoShowTime == 0){ scroll(); } }; //滚动判断图片是否加载 function scroll() { //#content的高度 var contentHeight = document.getElementById('one').offsetHeight; //设备可用高度 var availHeight = window.screen.availHeight; //滚动的高度 var scrollHeight = document.body.scrollTop; //判断如果显示出来了#two if (scrollHeight > contentHeight - availHeight) { //遍历#two下的img，然后替换路径 for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) { var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function () { document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); })(); } twoShowTime = 1; } } </script> </body> </html>

发表评论

表情：
评论列表 （有 0 条评论，617人围观）

还没有评论，来说两句吧...

相关阅读

    相关 图片懒加载

    在一个项目中，如果同时加载的图片太多的话，会导致页面卡顿，这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件，先加载出前面几张图片，然后当滚动条滚动的时候再依次加

    分手后的思念是犯贱分手后的思念是犯贱/ 0 赞/ 273 阅读

    相关 图片懒加载

    懒加载的意义[（在线demo预览）][demo] 尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是

    痛定思痛。痛定思痛。/ 0 赞/ 636 阅读

    相关 图片懒加载

    在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，

    偏执的太偏执、偏执的太偏执、/ 0 赞/ 633 阅读