• js实现懒加载原理


    概念:对于页面有很多静态资源的情况下(比如网商购物页面),为了节省用户流量和提高页面性能,可以在用户浏览到当前资源的时候,再对资源进行请求和加载。
    原理:当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
    img.offset().top <= window.height() + window.scrollTop(); 
    图片:

    
    
    时,使用html5中的data-属性作为暂存器, 给图片的src赋值上自定义属性data-lazyload的真实路径:
    <img src="loading.gif" data-lazyload="img.jpg"> 

    直接上一个完整的demo吧

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>懒加载</title>
    </head>
    <body>
        <div class="img">
            <img src="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h" alt="">
            <img src="./img/th.png" data-lazyload="https://dpic3.tiankong.com/67/cn/QJ6226943363.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/zt/sg/QJ6235849453.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/ul/ac/QJ6479383109.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic2.tiankong.com/1z/kb/QJ6401246638.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/ut/zj/QJ6634256101.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic.tiankong.com/09/jh/QJ6635714192.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic3.tiankong.com/6k/i5/QJ6727412259.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic2.tiankong.com/av/fc/QJ6872601378.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic.tiankong.com/37/1u/QJ7100086664.jpg@!350h">
            <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h">
        </div>
    </body>
    </html> 
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
       //  第一次加载
       getImg()
        var clock; //  设置一个延时函数节流
        $(window).on('scroll', () => {
            if (clock) {
                //  如果拉动滚动条时,延时函数还未执行完,则清除
                clearTimeout(clock);
            }
            clock = setTimeout(() => {
                getImg();
            }, 2000)
        })
        function getImg() {
            // 返回没有data-isLoaded的img标签
            // [1,2,3].not(1) => 返回不含有1的数组 [2,3]
            $('.img img').not('[data-isLoading]').each((index,item) => {
                if(isShow(item)) loading(item);
            })
        }
        function isShow(img) {
            return $(img).offset().top <= $(window).height() + $(window).scrollTop() 
        }
        function loading(img) {
            // 给图片的src赋值上自定义属性data-lazyload的真实路径:
            $(img).attr('src', $(img).attr('data-lazyload'));
            //  为已经加载的图片加一个标识,上面遍历图片的时候就会跳过已经加载了的图片
            $(img).attr('data-isLoaded', 1);
        }
    </script>
    

      

  • 相关阅读:
    使用JSON.NET实现对象属性的格式化的自定义
    AspNetCore项目-Service注入或覆盖
    发布Nuget
    收藏
    工具
    快捷键大全
    SqlServer分页查询语句
    面试相关
    Eratosthes algrithm 求素数
    code training
  • 原文地址:https://www.cnblogs.com/wd163/p/15346708.html
Copyright © 2020-2023  润新知