实现图片懒加载
实现图片懒加载
图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。
实例
<!DOCTYPE html>
<html>
<head><title>图片懒加载</title><style type="text/css">.imgUnitContainer{height: 300px; /* 固定一个高度 */width: 500px; /* 固定一个宽度 */overflow: hidden; /* 图片超出容器则隐藏 */border: 1px solid #eee; /* 边框 */margin: 10px; /* 外边距 */display: flex; /* 弹性布局 此处主要目的为使图片居中 */align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */}</style>
</head>
<body><div id="container"></div> <!-- 图片容器 -->
</body><script type="text/javascript">var imgNodeList = []; // 所有懒加载图片的引用(function(){ // 初始化操作var imgUrlArr = [ // 所有需要加载的图片链接"http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg","http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg","http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg","http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg","http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg","http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg","http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg","http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg","http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg","http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg","http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg","http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg",];var innerContainer = document.createElement("div"); // 最小化操作DOM 全部图片首先加载到此节点 最后一并挂载到图片容器imgUrlArr.forEach(v => { // 遍历图片的引用var imgUnitContainer = document.createElement("div"); // 图片外层div 主要为统一图片尺寸imgUnitContainer.className = "imgUnitContainer"; // 设置classvar img = new Image(); // new一个img节点img.src = "https://cdn.jsdelivr.net/gh/sentsin/layui@15d7241/dist/css/modules/layer/default/loading-2.gif"; // 显示loadingimg.setAttribute("data-src", v); // 存储真实需要加载的urlimg.setAttribute("loaded","no"); // 存储图片是否加载完成imgNodeList.push(img); // 将节点引用加入数组imgUnitContainer.appendChild(img); // 将img加入外层divinnerContainer.appendChild(imgUnitContainer); // 将外层div加入内部容器})document.getElementById("container").appendChild(innerContainer); // 一次性加入文档container节点})();function lazyLoad(){var height = window.innerHeight; // 可视区域高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动区域高度imgNodeList.forEach(v => { // 遍历if(v.getAttribute("loaded") === "yes") return ; // 如果已经加载完成 便不再重复加载if((height + scrollTop) > v.offsetTop){ // 如果已经出现在屏幕内v.setAttribute("loaded", "yes"); // 首先设置已加载避免重复加载var tmp = new Image(); // new一个缓存img节点 主要是为了实现隐式加载tmp.src = v.getAttribute("data-src"); // 设置缓存节点的src 使其开始加载tmp.onload = function(){ // 缓存img加载完成事件v.src = v.getAttribute("data-src"); // 缓存img加载完成后将真实url赋值文档显示的图片节点 浏览器会直接读取缓存}}})}window.onscroll = function(){ // 浏览器滚动事件lazyLoad();}window.onload = function(){ // 文档加载完成事件lazyLoad();}</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay