js代码|网站优化之图片懒加载(js图片懒加载怎么实现)
时间:2021-08-26 09:58:46 阅读:740
今天发一下“懒加载”的代码,请自行参考使用。
至于什么是懒加载,请自行百度。
已经注释了,还看不明白就别瞎改代码哦。
方案1.
代码:
<body> <p> <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/logo/%E9%80%8F%E6%98%8E%E7%AE%80%E6%98%93logo.png"> </p> <p> <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/07/202107191626675555389727.png"> </p> <p> <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/07/202107131626140251610706.png"> </p> <p> <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/06/202106161623823043193335.png"> </p> <p> <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/06/202106151623755521831422.png"> </p> <!-- 主要的是图片代码中的【class="zshaowl"】和【www.zshao.vip】 把原来的图片 src替换成www.zshao.vip--> <style> //已经写好CSS的网站,可以不用这个css,这个是用来演示的。 body { text-align: center; } img { width: 100%; max-width: 300px; height: 200px; margin-bottom: 100px; // 为了方便看效果,将图片尽可能的撑开 } </style> <script language="javascript"> // 图片懒加载类 class zshaowl { constructor(el) { this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合 this.init(); // 初始化 } // 判断是否该图片是否可以加载 canILoad() { let imglist = this.imglist; for (let i = imglist.length; i--;) { // 缩写,相当于if true this.getBound(imglist[i]) && this.loadImage(imglist[i], i); } } // 获取图片与窗口的信息 getBound(el) { let bound = el.getBoundingClientRect(); let clientHeight = window.innerHeight; // 图片距离顶部的距离 <= 浏览器可视化的高度,从而推算出是否需要加载 return bound.top <= clientHeight - 100; // -100是为了看到效果,您也可以去掉 } // 加载图片 loadImage(el, index) { // 获取之前设置好的www.zshao.vip值 let src = el.getAttribute('www.zshao.vip'); // 赋值到src,从而请求资源 el.src = src; // 避免重复判断,已经确定加载的图片应当从imglist移除 this.imglist.splice(index, 1); } // 当浏览器滚动的时候,继续判断 bindEvent() { window.addEventListener('scroll', () => { this.imglist.length && this.canILoad(); }); } // 初始化 init() { this.canILoad(); this.bindEvent(); } } // 实例化对象,参数则是需要使用懒加载的图片类名 const lazy = new zshaowl('.zshaowl') </script> </body>
方案2.
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lazyload 2</title> <style> img { display: block; margin-bottom: 50px; height: 200px; } </style> </head> <body> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/hpjy2.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/cf1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/wzry1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/wzry2.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/cf3shouyou.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/hpjy1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/logo.png"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <script> function throttle(fn, delay, atleast) { var timeout = null, startTime = new Date(); return function() { var curTime = new Date(); clearTimeout(timeout); if(curTime - startTime >= atleast) { fn(); startTime = curTime; }else { timeout = setTimeout(fn, delay); } } } function lazyload() { var images = document.getElementsByTagName('img'); var len = images.length; var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历 return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < len; i++) { if(images[i].offsetTop < seeHeight + scrollTop) { if(images[i].getAttribute('src') === 'http://www.clxsite.cn/img/loading.gif') { images[i].src = images[i].getAttribute('data-src'); } n = n + 1; } } } } var loadImages = lazyload(); loadImages(); //初始化首页的页面图片 window.addEventListener('scroll', throttle(loadImages, 500, 1000), false); </script> </body> </html>
方案3.
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lazyload 1</title> <style> img { display: block; margin-bottom: 50px; height: 200px; } </style> </head> <body> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/hpjy2.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/cf1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/wzry1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/wzry2.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/cf3shouyou.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/hpjy1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/logo.png"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg"> <script> function lazyload() { var images = document.getElementsByTagName('img'); var len = images.length; var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历 return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < len; i++) { if(images[i].offsetTop < seeHeight + scrollTop) { if(images[i].getAttribute('src') === 'http://www.clxsite.cn/img/loading.gif') { images[i].src = images[i].getAttribute('www.zshao.vip'); } n = n + 1; } } } } var loadImages = lazyload(); loadImages(); //初始化首页的页面图片 window.addEventListener('scroll', loadImages, false); </script> </body> </html>
网友评论