转载自：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 ...

随机推荐

Android studio 添加admob googgle play services
Android studio 添加admob googgle play services MainActivity import com.google.android.gms.ads.AdReques ...
hdu 1253:胜利大逃亡（基础广搜BFS）
胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
【cb2】安装终端
虽然xterm轻量,但用起来不爽. sudo apt-get install terminator 其它安装 sudo apt-get install spyder sudo apt-get inst ...
KVC/KVO之KVO
本章将分为三个部分: KVO是什么 KVO有什么用 KVO例子 KVO是什么 KVO,即NSKeyValueObserving,一个非正式的Protocol,提供一种机制来间接观察其他对象属性的变化. ...
P2483 [SDOI2010]魔法猪学院
P2483 [SDOI2010]魔法猪学院摘要 --> 题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世 ...
Swig 使用指南（express模板）
如何使用 API swig.init({ allowErrors: false, autoescape: true, cache: true, encoding: 'utf8', filters: { ...
Numpy库解析
python中的axis 其实问题理解axis有问题,df.mean其实是在每一行上取所有列的均值,而不是保留每一列的均值.也许简单的来记就是axis=0代表往跨行(down),而axis=1代表跨列 ...
webpack 报错 path is not defind
webpack.config.js里的内容是这样的,注意标红的地方: 首先,绝对路径'./dist'是没有问题的那么,查了很多,最后看到别人的webpack.config.js里面这样写着,现在c ...
解决;R语言使用sqldf库是报错"Failed to connect to database: Error: Access denied for user '..'@'localhost' (using password: NO) Error in !dbPreExists : invalid argument type"
原因:在使用sqldf时,不需要加载RMySQL库解决方案:在控制台执行释放RMySQL库加载 detach("package:RMySQL", unload=T);
protobuf在java应用中通过反射动态创建对象(DynamicMessage）
---恢复内容开始--- 最近编写一个游戏用到protobuf数据格式进行前后台传输,苦于protobuf接受客户端的数据时是需要数据类型的如xxx.parseForm(...),这样就要求服务器在接 ...

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

懒加载工具类

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

随机推荐

热门专题