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

随机推荐

sublime text 2自定义代码片段
本文引用 http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_tex ...
sdut 面向对象程序设计上机练习十（运算符重载）
面向对象程序设计上机练习十(运算符重载) Time Limit: 1000MS Memory limit: 65536K 题目描写叙述定义一个复数类Complex,重载运算符"+" ...
【SSH】远程下载
scp -r root@123.67.11.93:/var/lamp/abc.txt ./
在WPF中弹出右键菜单时判断鼠标是否选中该项
和上篇在WPF的TreeView中实现右键选定一样,这仍然是一个右键菜单的问题: 这个需求是在一个实现剪贴板的功能的时候遇到的:在弹出右键菜单时,如果菜单弹出位置在ListViewItem中时,我 ...
sqlalchemy 判断字段是否存在
1.low方法: (1)person_obj=session.query(Person).filter(Person.name=='jack') print (person_obj.count()) ...
C# winform 中MessageBox用法大全（附效果图）
我们在程序中经常会用到MessageBox. MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: 1.MessageBox.Show(“Hello~~~~”); 最简单的, ...
iOS：友盟SDK第三方登录分享及友盟统计的使用
本文转载至 http://www.it165.net/pro/html/201503/37101.html Tag标签:第三方 01.#import "UMSocial.h" ...
控制iOS 7中的状态栏
本文转载至:http://blog.csdn.net/pucker/article/details/12112105 苹果终于发布了iOS 7正式版,大批的用户都已经纷纷进行了升级.如果App是由Xc ...
VMware虚拟机下安装CentOS7.0超详细图文教程
1.本文说明: 官方的第一个文本档案.也就是0_README.txt,大概意思是这样(渣翻译,但是大概意思还是有的). CentOS-7.0-1406-x86_64-DVD.iso:这个镜像(DVD ...
No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-netflix-ribbon?
... 60 common frames omittedCaused by: java.lang.IllegalStateException: No Feign Client for loadBala ...

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

懒加载工具类

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

随机推荐

热门专题