zoukankan      html  css  js  c++  java
  • 实现图片懒加载

    实现图片懒加载

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

    实例

    <!DOCTYPE html>
    <html>
    <head>
        <title>图片懒加载</title>
        <style type="text/css">
            .imgUnitContainer{
                height: 300px; /* 固定一个高度 */
                 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
    
  • 相关阅读:
    LeetCode 252. Meeting Rooms
    LeetCode 161. One Edit Distance
    LeetCode 156. Binary Tree Upside Down
    LeetCode 173. Binary Search Tree Iterator
    LeetCode 285. Inorder Successor in BST
    LeetCode 305. Number of Islands II
    LeetCode 272. Closest Binary Search Tree Value II
    LeetCode 270. Closest Binary Search Tree Value
    LeetCode 329. Longest Increasing Path in a Matrix
    LintCode Subtree
  • 原文地址:https://www.cnblogs.com/WindrunnerMax/p/12929784.html
Copyright © 2011-2022 走看看