<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            img{

                width: 500px;

                height: 500px;

                display: block;

            }

        </style>

    </head>

    <body>

            <div class = "box">

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

                <img asrc = "img/2.jpg" src="" alt="img1"/>

            </div>

    </body>

    <script type="text/javascript">

        (function(){

            function tagName(tagName){

                return document.getElementsByTagName(tagName);

            }function addEvent(obj,type,func){

                if(obj.addEventListener){

                    obj.addEventListener(type,func,false);

                }else if(obj.attachEvent){

                    obj.attachEvent('on'+type,func);

                }

            }

            var v = {

                eleGroup:null,

                eleTop:null,

                eleHeight:null,

                screenHeight:null,

                limitHeight:null

            }

            function init(element){

                v.eleGroup = document.getElementsByTagName(element);

                v.screenHeight = document.documentElement.clientHeight;

                var len = v.eleGroup.length;

                for(var i = 0;i < len; i++){

                    if(v.eleGroup[i].offsetTop<v.screenHeight&&v.eleGroup[i].getAttribute("asrc")){

                        v.eleGroup[i].setAttribute("src",v.eleGroup[i].getAttribute("asrc"));

                        v.eleGroup[i].removeAttribute("asrc");

                    }

                }

            }

            function lazyload(){

                v.limitHeight = document.documentElement.scrollTop || document.body.scrollTop + document.documentElement.clientHeight;

                var len = v.eleGroup.length;

                for(var j = 0 ;j < len; j++){

                    if(v.eleGroup[j].offsetTop <= v.limitHeight&&v.eleGroup[j].getAttribute("asrc")){

                        v.eleGroup[j].setAttribute("src",v.eleGroup[j].getAttribute("asrc"));

                        v.eleGroup[j].removeAttribute("asrc");

                    }

                }

            }

            init("img");

            addEvent(window,"scroll",lazyload);

        })()

    </script>

</html>

我们知道了浏览器加载img是很耗费资源的，还有带宽，而且还有一个特点就是如果没有设置img的src属性，就不会消耗这些资源，所以我们用到的加载的方法就是首先将所有img的src置空，然后自定义一个asrc属性，这里放的是实际的src，当我们需要加载这张图片时就可以获取img的这个属性，并将其值赋值给src，实现图片的加载。

思路：首先在当前可视化的区域加载图片,首先需要获取浏览器的高度，然后查询每个元素相对浏览器顶部距离，然后加载满足：相对浏览器顶部的距离小于浏览器高度的图片，实现对可视化区域的初始化填充。

真正实现懒加载的原理是：获取当前元素距离浏览器顶部的高度，与浏览器+scroll卷到上面的高度相比较，如果前者小于后者就代表轮到这张图片显示了！就把它加载出来。

ps：需要注意的地方

addEventListener VS attachEvent

前者兼容主流浏览器，后者兼容ie（ie6及更高级版本兼容，低于ie6未测试）

document.documentElement VS document.body

ie默认的box-sizing为border-box不会将html识别为盒模型，所以用document.documentElement就获取不到clientHeight scrollHeight等值。所以使用

 document.documentElement.scrollTop || document.body.scrollTop

可以解决兼容性问题

js学习之原生js实现懒加载的更多相关文章

  1. 001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

  2. Spring5.0源码学习系列之浅谈懒加载机制原理

    前言介绍 附录:Spring源码学习专栏 在上一章的学习中,我们对Bean的创建有了一个粗略的了解,接着本文挑一个比较重要的知识点Bean的懒加载进行学习 1.什么是懒加载? 懒加载(Lazy-ini ...

  3. 原生 JS 实现最简单的图片懒加载

    懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...

  4. Vue-Router学习第二弹动态路由\懒加载\嵌套路由

    在我们做项目时肯定会有出现动态路由: 举个栗子: 一个品种的商品页面会有同类不同样的商品就要在路由的后面加一个id: Vue的路由id是这样添加的: 两种动态路由 一种是params参数添加: 首先现 ...

  5. 原生javascript代码懒加载

    1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz- ...

  6. 【转】ViewPager学习笔记（一）——懒加载

    在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPag ...

  7. [转]ViewPager学习笔记（一）——懒加载

    在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPag ...

  8. Swift 学习一函数&函数属性&懒加载

    函数 函数相当于OC中的方法 格式: func 函数名(参数列表) -> 返回值类型 {    代码块    return 返回值} func 函数名(参数列表){  // 返回值为Void 可 ...

  9. Chrome 75 将原生支持图片懒加载

    4 月 6 日,Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 load ...

随机推荐

  1. 羊车门问题(Python)

    羊车门问题(结对作业) 在完成本题之前,请仔细阅读下面内容: 题目描述:有3扇关闭的门,一扇门后面停着汽车,其余门后是山羊,只有主持人知道每扇门后面是什么.参赛者可以选择一扇门,在开启它之前,主持人会 ...

  2. 通过java程序调用ant build.xml配置文件中指定的target

    一.概述 通过ant实现项目的自动化部署,jar包生成,替换,tomcat关停.启动,查看项目日志: 通过java程序调用已编辑好的ant脚本build.xml配置文件中指定的target: 文中文件 ...

  3. Android 开发 RecyclerView设置间距

    实现步骤 首先要创建一个类继承RecyclerView.ItemDecoration 然后重新这个类的getItemOffsets方法,删除方法里的super.getItemOffsets(outRe ...

  4. 2008R2 部署 aspnetcore repair failed 函数不正确

    vc_redist.x64

  5. Java序列化相关

    java类实现serializable有什么好处或意义 一个对象序列化的接口,一个类只有实现了Serializable接口,它的对象才是可序列化的.因此如果要序列化某些类的对象,这些类就必须实现Ser ...

  6. Python科学计算结果的存储与读取

    Python科学计算结果的存储与读取 总结于2019年3月17日  荆楚理工学院 计算机工程学院 一.前言 显然,作为一名工科僧,执行科学计算,需用Python.PS:快忘记Matlab吧.我用了二十 ...

  7. nodejs + express + express-session + redis

    nodejs + express + express-session + redis 标题似乎又是不太对,大家领会精神哈 Express 安装express-generator,然后用它来创建一个工程 ...

  8. MATLAB入门笔记

    % MATLAB:MATLAB 为 Matrix Laboratory ,用来处理矩阵可编程可实现算法逻辑的计算工具% % eg:1 绘制正弦和余弦曲线x=[0:0.1:4*pi]; %建立角度向量p ...

  9. JSP 有些类can not be resolved

    看了网上的帖子,切换了jdk到低版本,发现还是不能解决问题. 发现出现问题的代码在tomcat下的Lib包中的其中一个包,jasper.jar 我在想是不是tomcat的版本问题,拷贝了其他地方的ja ...

  10. 【转】使用TortoiseSVN搭建本地的版本控制库

    转:https://blog.csdn.net/chenyusiyuan/article/details/6925374 越来越发觉版本控制的重要性了,很惭愧到现在才真正开始落实~~~ 这里使用Tor ...