Skip to main content

实现图片懒加载

图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。

实例​

<!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