转载自：https://www.jianshu.com/p/9b30b03f56c2

懒加载工具类

<script type="text/javascript">

      //懒加载工具方法

      function lazyload(idName) {

        var imgs;

        if (idName == "container") {

            imgs = document.getElementById('container').querySelectorAll('img');

        }

        H = window.innerHeight;

        var lazyFunc=function () {

            var S = document.documentElement.scrollTop || document.body.scrollTop;

            [].forEach.call(imgs, function (img) {

                if (!img.getAttribute('data-src')) {

                    return

                };

                if (H + S + 200 > getTop(img)) {

                    img.src = img.getAttribute("data-src");

                    img.removeAttribute("data-src");

                }

            })

        };

        window.onload = window.onscroll = lazyFunc;

        window.onscroll = lazyFunc;

        lazyFunc();

        function getTop(e) {

            var T = e.offsetTop;

            while (e = e.offsetParent) {

                T += e.offsetTop;

            }

            return T;

        };

    };

    lazyload("container");//执行懒加载，可以哪里需要哪里再加

</script>

结束。

原理：就是当图片出现在浏览器可视区域中时，再把图片的url传给它，也可以在这个时候创建图片，而图片被包裹在一个容器中，比如li或div，图片的url放在其容器的自定义属性data-src中；

document.documentElement.clientWidth 　　//屏幕宽 375
document.documentElement.clientHeight 　　 //屏幕高 667
document.documentElement.scrollTop 　　 //左上角到html鼎高当前视线元素划上去了多少，也就是当前00原点到页鼎html元素的高度最底端3457
document.documentElement.scrollHeight　　 //4124 总页高
window.innerHeight 　　 //667

window.innerWidth　　//375

判定其加载条件是，当图片距离页面顶端的距离小于浏览器滚动距离加上可视区域高度，即它出现在可视区域时，就加载它；

获取图片距离页面顶端的高度利用offsetTop计算出其距离offsetParent的高度，再循环叠加，最终获取到其距离页面顶端的高度：

//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部

        function getTop(e) {

            var T = e.offsetTop;

            while(e = e.offsetParent) {

                T += e.offsetParent;

            }

            return T;

        }

作者：MatthewMaYao

链接：https://www.jianshu.com/p/9b30b03f56c2

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

可视区域高度为

var H = window.innerHeight;

滚动距离为

var S = document.documentElement.scrollTop || document.body.scrollTop;

然后定义赋值函数

function lazyLoad(imgs) {

            var H = window.innerHeight;

            var S = document.documentElement.scrollTop || document.body.scrollTop;

            for (var i = 0; i < imgs.length; i++) {

                if (H + S > getTop(imgs[i])) {

                    imgs[i].src = imgs[i].getAttribute('data-src');

                }

            }

        }

作者：MatthewMaYao

链接：https://www.jianshu.com/p/9b30b03f56c2

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最后在把页面滚动函数赋值给元素window.onload，在所有元素加载完以后再进行操作，这一步很重要！

window.onload = window.onscroll = function () {

            lazyLoad(imgs);

        }

　　全部代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>图片懒加载</title>

</head>

<style>

    img {

        display: block;

    }

</style>

<body>

<div>

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

    <img src="" data-src="data:images/girl1.jpg" alt="图片">

</div>

</body>

<script type="text/javascript">

        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部

        function getTop(e) {

            var T = e.offsetTop;

            while(e = e.offsetParent) {

                T += e.offsetParent;

            }

            return T;

        }

        function lazyLoad(imgs) {

            var H = window.innerHeight;

            var S = document.documentElement.scrollTop || document.body.scrollTop;

            for (var i = 0; i < imgs.length; i++) {

                if (H + S > getTop(imgs[i])) {

                    imgs[i].src = imgs[i].getAttribute('data-src');

                }

            }

        }

        window.onload = window.onscroll = function () {

            lazyLoad(imgs);

        }

//    var imgs = document.body.querySelectorAll('img'),

//        H = window.innerHeight;  //浏览器视窗高度

//    function lazyload() {

//        var S = document.documentElement.scrollTop || document.body.scrollTop;   //滚动条滚过高度

//        [].forEach.call(imgs, function (img) {

//            if (!img.getAttribute('data-src')) {

//                return

//            }  //已经替换过的跳过

//            if (H + S - 200 > getTop(img)) {    //为达到演示效果，这里H+S减去200，延后加载时机

//                img.src = img.getAttribute("data-src");

//                img.removeAttribute("data-src");

//            }

//        });

//        [].every.call(imgs, function (img) {

//            return !img.getAttribute('data-src')

//        }) && (window.removeEventListener("scroll", lazyload, false));   //完成所有替换后注销事件

//

//    }

//

//    window.addEventListener("scroll", lazyload, false);

//    window.addEventListener("load", lazyload, false);

//

//    function getTop(e) {

//        var T = e.offsetTop;

//        while (e = e.offsetParent) {

//            T += e.offsetTop

//        }

//        return T

//    }

</script>

</html>

作者：MatthewMaYao

链接：https://www.jianshu.com/p/9b30b03f56c2

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

结束。

懒加载 js----例子------图片的更多相关文章

懒加载js实现和优化
1.懒加载的作用和原理在我们展示多图片的场景下,类似淘宝或者百度图片,由于图片的数目过多,全部从服务器请求会给用户糟糕的用户体验,为了提升用户体验,我们这里使用懒加载,随着下拉逐步加载. 每个图片的 ...
基于jquery的图片懒加载js
function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...
爬虫之图片懒加载技术及js加密
图片懒加载图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
JS实现图片懒加载插件
一.前言我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
js, javascript 图片懒加载实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
原生js - 两种图片懒加载实现原理
目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...

随机推荐

Visual Studio Code调试node.js：无法在PATH上找到运行时的node
首先,环境变量Path中加入nodejs的路径: 验证nodejs是否已经加入环境变量: 接着,重新启动Visual Studio Code, 试一下,是不是好了~ 附录:Visual Studi ...
POJ2139 Six Degrees of Cowvin Bacon [Floyd]
水题,随手敲过一看就是最短路问题,a,b演同一场电影则他们的距离为1 默认全部两两原始距离无穷,到自身为0 输入全部数据处理后floyd 然后照它说的求平均分离度再找最小的,×100取整输出 #i ...
Git------Commit和Push的区别
转载:http://wenda.so.com/q/1435946424728324?src=140 git作为支持分布式版本管理的工具,它管理的库(repository)分为本地库.远程库. git ...
剑指 offer set 24 扑克牌的顺子
题目从扑克牌中任意抽取出 5 张牌, 判断是不是顺子, 并且大小王可以看成任意的数字思路 1. 把大小王当做 0 插入到数组中, 然后对数组排序 2. 统计相邻两个数之间的空隙数, 若空隙数大于 ...
windows系统共享设置最顺的一次
1.关掉防火墙 2.控制面板\网络和 Internet\网络和共享中心\高级共享设置 3.设置要共享的文件夹属性
第十二章：Linux中权限控制实例
前言前文对 Linux 中的权限进行了较为透彻的分析.而本文,则在前文的基础上,具体说明如何在代码中进行权限控制. 下面的代码涉及到以下几个方面: 1. 创建文件时设置文件权限 2. 修改文件的默认 ...
M451例程讲解之按键
/**************************************************************************//** * @file main.c * @ve ...
Java之自动拆装箱
顾名思义,自动拆装箱就是将基本类型和包装类进行自动的互相转换. JDK5.0后,将自动装箱/拆箱引Java中. 自动装箱的过程:每当需要一种类型的对象时,这种基本类型就自动地封装到与它相同类型的包装中 ...
java基础---->java中nio的使用（一）
JDK 1.4 中引入的新输入输出 (NIO) 库在标准 Java 代码中提供了高速的.面向块的 I/O.今天我们就简单的学习一下nio的知识.我笑,便面如春花,定是能感动人的,任他是谁. nio的简 ...
『AngularJS』一点小小的理解
AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与开发框架不断的提出与发展,而就目前来说,除 ...

懒加载 js----例子------图片

懒加载工具类

懒加载 js----例子------图片的更多相关文章

随机推荐

热门专题