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

时间：2025-01-03 10:35:38

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

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

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

來源：简书

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

结束。

相关文章