实现图片懒加载#
图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。
实例#
<!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"; // 设置class
var img = new Image(); // new一个img节点
img.src = "https://cdn.jsdelivr.net/gh/sentsin/layui@15d7241/dist/css/modules/layer/default/loading-2.gif"; // 显示loading
img.setAttribute("data-src", v); // 存储真实需要加载的url
img.setAttribute("loaded","no"); // 存储图片是否加载完成
imgNodeList.push(img); // 将节点引用加入数组
imgUnitContainer.appendChild(img); // 将img加入外层div
innerContainer.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
目录