图片实现懒加载
原理：所有图片用同一张体积小的图片代替，浏览器滚动到哪里加载哪里的图片
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> img{ vertical-align: middle; max-width: 100%; display: block; margin: 0 auto 10px; } </style> </head> <body> <div class="pic"> <img src="../images/temp.jpg" alt="" data-src="../images/img-1.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-2.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-3.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-4.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-5.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-6.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-7.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-8.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-9.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-10.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-11.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-12.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-13.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-14.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-15.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-16.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-17.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-18.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-19.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-20.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-21.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-22.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-23.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-24.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-25.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-26.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-27.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-28.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-29.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-30.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-31.jpg" /> <img src="../images/temp.jpg" alt="" data-src="../images/img-32.jpg" /> </div> </body> <script> // 所有图片元素 var pic = document.querySelectorAll(".pic img"); // 浏览器高度 var clientHeight = document.documentElement.clientHeight; // 浏览器滑轮滚动时执行 window.addEventListener('scroll', function () { loadlazy(pic, clientHeight); }) // 浏览器加载完成时执行 window.onload = function () { loadlazy(pic, clientHeight); } function loadlazy(pic, clientHeight) { // 浏览器滑轮滑动的高度 var scrollTop = document.documentElement.scrollTop; // 遍历图片 pic.forEach(function (img) { // 图片距离浏览器顶部的距离 <= 浏览器高度+浏览器滑轮滑动的高度 时图片出现 if (img.offsetTop <= clientHeight + scrollTop) { img.src = img.dataset.src; } }); } </script> </html>
