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

随机推荐

android4.4上全屏界面实现禁止状态栏下拉
附上我改动的方法:PhoneWindowManager.java里面的改动 --- a/frameworks/base/policy/src/com/android/internal/policy/i ...
LodRunner实现大负载测试的四部曲（配置系统参数、配置LR、修改脚本、设置组策略）
见 http://www.51testing.com/?uid-97659-action-viewspace-itemid-210924 LoadRunner以下简称(LR)是目前业界最流行的压力测试 ...
jhipster（springboot+datatable+jpa）后台分页,总结
最近用datatable做了一个后台分页,但是后台实体原本没写DTO.就碰到的问题做了一下总结一.datatable使用get方式传数据到后台,这是正常的后台分页,不涉及过滤查询和前端传递的排序字段 ...
XE10 塔建 Android 开发环境（已测试通过)
XE10 塔建 Android 开发环境 1. E:\DevCSS\Android\adt-bundle-windows-x86-20131030\adt-bundle-windows-x86-201 ...
Django学习笔记第四篇--数据处理URL和数据库
一.URL: 1.基础的URL与视图函数的映射 from django.conf.urls import url from django.contrib import admin from appna ...
ios 将图片做成圆形
UIImageView * imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"oiuyfdsa.png ...
jquery如何获取type=hidden的input元素的值？
function setHiddenFields() { var hiddens = $("input:hidden"); $.each(hiddens, function (in ...
Spring--简记
Spring通过一个配置文件描述Bean及Bean之间的依赖关系,利用Java语言的反射功能实例化Bean并建立Bean之间的依赖关系. Spring的IoC(控制反转)容器提供了Bean实例缓存.生 ...
golang的指针和切片
首先为什么要讲go的指针和切片放在一起? 因为go指针和切片都是引用类型引用类型就是说切片和指针保存的只是内存的地址,而不是具体的值,效率在大数据读取方面效率会高很多. 1.怎么定义一个切片方法1 ...
【keras框架】
更高级别的封装.更简单的api,以tensorflow.theano为后端,支持更多的平台读取网络模型后生成网络结构图读取 from keras.models import load_model ...

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

懒加载工具类

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

随机推荐

热门专题