html纯js实现图片懒加载

硅谷探秘者 1467 0 0

html纯js实现图片懒加载 

html纯js实现图片懒加载案例代码下载地址:http://www.jiajiajia.club/file/info/JA67P0/123

<script>
    window.onload = function(){
        //imgs是目标区域的所有img标签集合
        var imgs=document.getElementsByTagName("img");
        var imgDatas=new Array();
        for(var i=0;i<imgs.length;i++){
            if(imgs[i].getAttribute("data-src")!=null){
                imgDatas[i]=imgs[i];
            }
        }
        function lazyload(){
            var h = window.innerHeight;
            var s = document.documentElement.scrollTop || document.body.scrollTop;
            for(var i=0;i<imgDatas.length;i++){
                if ((h+s)>imgDatas[i].offsetTop) {
                    imgDatas[i].src = imgDatas[i].getAttribute('data-src')
                    imgDatas.splice(i,1);
                }
            }
        }
        lazyload();
        window.onscroll =function(){
            lazyload();
        }
    }
</script>

 


评论区
请写下您的评论...
暂无评论...
猜你喜欢
html图片懒加载 1291 jslazyLoading.html测试页面
html 1414 iframe自适应高度+iframe动态写入内容+iframe
前端,javascript 541 下方的代码包括html,css,javascript。可直接复制到本地文件测试。如果引用的无法访问,请替换连接。 !DOCTYPEhtml htmllang="en" head
official 839 【viewerviewerjsviewer.jsviewer-js】github地址:https://github.com/fengyuanchen/viewerjshtml文件引入两个文件
其他 857 式:Word,Excel,PowerPoint,Project,等office文档以及PDF文档。除了强大的文件操纵组件之外,Aspose.Total还提供了用于制、写电子邮件、拼写检查、创建条形码、
weblog 1966 java服务端sha256密importjava.io.UnsupportedEncodingException;importjava.security.MessageDigest
工具 5796 java完美html转pdf1.pom依赖:dependencygroupIdcom.itextpdf/groupIdartifactIditextpdf
前端(h5) 2137 javascript代码scripttype="text/javascript"document.addEventListener('copy',function(event
归档
2018-11  12 2018-12  33 2019-01  28 2019-02  28 2019-03  32 2019-04  27 2019-05  33 2019-06  6 2019-07  12 2019-08  12 2019-09  21 2019-10  8 2019-11  15 2019-12  25 2020-01  9 2020-02  5 2020-03  16 2020-04  4 2020-06  1 2020-07  7 2020-08  13 2020-09  9 2020-10  5 2020-12  3 2021-01  1 2021-02  5 2021-03  7 2021-04  4 2021-05  4 2021-06  1 2021-07  7 2021-08  2 2021-09  8 2021-10  9 2021-11  16 2021-12  14 2022-01  7 2022-05  1 2022-08  3 2022-09  2 2022-10  2 2022-12  5 2023-01  3 2023-02  1 2023-03  4 2023-04  2 2023-06  3 2023-07  4 2023-08  1 2023-10  1 2024-02  1 2024-03  1 2024-04  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。