首页 > 其他 > 详细

性能优化_懒加载

时间:2021-05-25 15:44:04      阅读:17      评论:0      收藏:0      [点我收藏+]

效果

技术分享图片

法1

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>性能优化:图片的懒加载</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    img {
        display: block;
        width: 100%;
        height: 300px;
        margin-bottom: 20px;
    }
</style>

<body>
    <img data-src="https://i.loli.net/2021/05/25/qGv38DdNOVFgLP4.jpg" alt="">
    <img data-src="../06image/2.jpg" alt="">
    <img data-src="../06image/3.jpg" alt="">
    <img data-src="../06image/4.jpg" alt="">
    <img data-src="../06image/5.jpg" alt="">
    <img data-src="../06image/6.jpg" alt="">
    <img data-src="../06image/7.jpg" alt="">
    <img data-src="../06image/8.jpg" alt="">
    <img data-src="../06image/9.jpg" alt="">
    <img data-src="../06image/10.jpg" alt="">
    <img data-src="../06image/1.jpg" alt="">
    <img data-src="../06image/2.jpg" alt="">
</body>

<script>
    // 法2:=================================================================
    // api说明
    // getBoundingClientRect()//获取元素的大小及位置 位置:相对于左上角 
    var imgs = document.querySelectorAll(img);

    //是否在可视区域内:元素的top <= 可视区域的高度
    function isIn(el) {
        var bound = el.getBoundingClientRect();
        var clientHeight = window.innerHeight;
        return bound.top <= clientHeight;
    }
    function loadImg(el) {
        if (!el.src) {
            var source = el.dataset.src;
            el.src = source;
        }
    }
    //检查图片是否在可视区内,如果不在,则加载
    function check() {
        Array.from(imgs).forEach(function (el) {
            if (isIn(el)) {
                loadImg(el);
            }
        })
    }
    window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
        check();
    }
</script>

</html>
说明:getBoundingClientRect获取的位置如图所示,top <= clientHeight则进入可视区域,加载图片

技术分享图片

法2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>性能优化:图片的懒加载</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    img {
        display: block;
        width: 100%;
        height: 300px;
        margin-bottom: 20px;
    }
</style>

<body>
    <img data-src="https://i.loli.net/2021/05/25/qGv38DdNOVFgLP4.jpg" alt="">
    <img data-src="../06image/2.jpg" alt="">
    <img data-src="../06image/3.jpg" alt="">
    <img data-src="../06image/4.jpg" alt="">
    <img data-src="../06image/5.jpg" alt="">
    <img data-src="../06image/6.jpg" alt="">
    <img data-src="../06image/7.jpg" alt="">
    <img data-src="../06image/8.jpg" alt="">
    <img data-src="../06image/9.jpg" alt="">
    <img data-src="../06image/10.jpg" alt="">
    <img data-src="../06image/1.jpg" alt="">
    <img data-src="../06image/2.jpg" alt="">
</body>

<script>
//  法1:
// api说明
// document.documentElement.clientHeight//获取屏幕可视区域的高度
// element.offsetTop//获取元素(待加载图片)相对于文档顶部的高度,元素相对于其父元素容器顶部的距离
// document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离
var imgs = document.querySelectorAll(img);

// 获取元素(待加载图片)相对于文档顶部的高度
function getTop(e) {
    var T = e.offsetTop;
    //offsetTop是元素与offsetParent的距离,循环获取直到页面顶部
    // offsetTop是相对于父元素的,所以上面带吗有一个offsetParent。
    // while(e = e.offsetParent) {
    //     T += e.offsetTop;
    // }
    return T;
}

function lazyLoad(imgs) {
    var H = document.body.clientHeight; // 网页可见区域高
    //  document.documentElement.clientHeight; // 可见区域高度
    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 () { //onscroll()在滚动条滚动的时候触发
    lazyLoad(imgs);
}
</script>

</html>

说明:offsetTop获取的高度如图所示,因此 可视区域高度+scrollTop > offetTop时 表示进入可视区域,加载图片

技术分享图片

原理

图片懒加载的原理就是暂时不设置图片的 src 属性,而是将图片的 url 隐藏起来,比如先写在 data-src 里面,等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面,从而实现图片的延迟加载。

获取元素的data-src的方式有如下两种方式:

 var source = el.dataset.src;
 el.src = source;
 imgs[i].src = imgs[i].getAttribute(‘data-src‘);

 

性能优化_懒加载

原文:https://www.cnblogs.com/ljingjing/p/14808534.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!