html纯js实现图片懒加载

2019 精帖
0 144

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>

 

留言(0)
猜你喜欢
  • blog 前端页面滚动div固定

    前端页面滚动div固定例:jsvar top1 = $('.scroll').offset().top; window.onscroll = function() { var win_top = $(this).scro
  • blog web前端html页面添键盘事件

    web前端html页面添键盘事件 $(document).keydown(function(event){ if(event.keyCode==13){ document.getElementBy
  • blog java类是如何

    首先要知道类的的过程包括了、验证、准备、解析、初始化五个阶段。 java虚拟机class的过程         虚拟机把Class文件到内存,然后进行校验,解析和初始化,最终形
  • blog java类器理解

    器Java类器(英语:Java Classloader)是Java运行时环境(Java Runtime Environment)的一部分,负责动态Java类到Java虚拟机的内存空间中。类通常是按需,即第一次使用该类时才
  • file java swing九宫格拼游戏

    <p><img src="http://www.jiajiajia.club:8089/weblog/2019_12_24/f1a79da6-9c70-4d33-99b5-4a006d5dfa29.j
  • blog jvm内存模型分析-类和类

    器 类器虚拟机设计团队把类阶段中的“通过一个类的全限定名来获取描述此类的二进制字节流”这个动作放到 Java 虚拟机外部去,以便让应用程序自己决定如何去获取所需要的类。这个动作的代码模块称为“类器”。
  • blog javascript js滑动定位(锚点定位)

    1.锚点定位很简单两行搞定:<a href='#anchorName'>点击跳转到anchorName的位置</a><a name='anchorName'>anchorName</a>2.js代码,并带滑动效果 $(document)
  • blog 迷宫问题-js

    迷宫问题<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <script> var flag=true; window.onload = f
  • blog java web验证码

    java web验证码1.验证码的作用: 防止恶意破解密码、刷票、论坛灌水、刷页。 有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试,际上使用验证码是在很多网站通行的方式(比如
  • ofc 解Dijkstra算法过程(java代码)

    解Dijkstra算法过程(java代码)