html纯js实现图片懒加载

硅谷探秘者 262 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图片懒加载 152 jslazyLoading.html测试页面
html 398 iframe自适应高度+iframe动态写入内容+iframe
weblog 141 java服务端sha256密importjava.io.UnsupportedEncodingException;importjava.security.MessageDigest
前端(h5) 1066 javascript代码scripttype="text/javascript"document.addEventListener('copy',function(event
工具 2497 java完美html转pdf1.pom依赖:dependencygroupIdcom.itextpdf/groupIdartifactIditextpdf
weblog 256 javaMD5密和和javascript密该密工具没有盐java密工具importjava.security.MessageDigest
weblog 2196 使用 this.panel.BackgroundImage=global::WindowsFormsApplication2.Properties.Resources.one; 这样就给一个panel设置了背景
前端(h5) 677 1.锚点定位很简单两行搞定:ahref="#anchorName"点击跳转到anchorName的位置/aaname="anchorName"anchorName/a2.js代码,并带滑动效果
归档
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
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo
目录