原生js实现懒加载

最新推荐文章于 2023-01-04 14:46:25 发布

低调的小犬_Hansen

最新推荐文章于 2023-01-04 14:46:25 发布

阅读量206

点赞数

分类专栏：性能优化 javascript

本文链接：https://blog.csdn.net/qq_38588845/article/details/100776508

版权

javascript 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

性能优化

5 篇文章 0 订阅

订阅专栏

我所使用的方法：在写网页img标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性eg：data-src。将路径放入这个自定义的属性中。那么在加载页面时，这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时，将data-src中的路径赋值给src属性，并开始加载。

代码实现

<!DOCTYPE html>
<html lang="en">
<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>原生js懒加载-不是我不想加载，只是我想慢点加载</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;
    }
    #main{
        width:1000px;
        margin:0 auto;
    }
    #main ul li{
        width:200px;
        height: 300px;
        border:1px solid #ccc;
        float: left;
        margin-left: 20px;
        margin-top: 20px;
    }
    #main ul li img{
        width: 100%;
        height:100%;
    }
    </style>
</head>
<body>
<div id="main">
        <ul>
            <li><img src="" alt="" data-src="img/01.jpg"></li>
            <li><img src="" alt="" data-src="img/02.jpg"></li>
            <li><img src="" alt="" data-src="img/03.jpg"></li>
            <li><img src="" alt="" data-src="img/04.jpg"></li>
            <li><img src="" alt="" data-src="img/05.jpg"></li>
            <li><img src="" alt="" data-src="img/06.jpg"></li>
            <li><img src="" alt="" data-src="img/07.jpg"></li>
            <li><img src="" alt="" data-src="img/08.jpg"></li>
            <li><img src="" alt="" data-src="img/09.jpg"></li>
            <li><img src="" alt="" data-src="img/10.jpg"></li>
            <li><img src="" alt="" data-src="img/11.jpg"></li>
            <li><img src="" alt="" data-src="img/12.jpg"></li>
            <li><img src="" alt="" data-src="img/13.jpg"></li>
            <li><img src="" alt="" data-src="img/14.jpg"></li>
            <li><img src="" alt="" data-src="img/15.jpg"></li>
            <li><img src="" alt="" data-src="img/16.jpg"></li>
            <li><img src="" alt="" data-src="img/17.jpg"></li>
            <li><img src="" alt="" data-src="img/18.jpg"></li>
            <li><img src="" alt="" data-src="img/19.jpg"></li>
            <li><img src="" alt="" data-src="img/20.jpg"></li>
        </ul>
</div>
<script>
//可视区高度
var insight = document.documentElement.clientHeight;
var oImg = document.querySelectorAll("img");

window.onload =  window.onscroll = function(){
    //卷起高度document.body.scrollTop用于搜狗，document.documentElement.scrollTop用于谷歌
    var oScroll = document.body.scrollTop || document.documentElement.scrollTop;
    for(var i = 0;i < oImg.length;i++){
        //如果图片距离页面顶端高度<滚动条高度+可视区的高度，那么图片显示，反之不显示
        if(oImg[i].offsetTop < oScroll + insight){
            oImg[i].src = oImg[i].getAttribute("data-src");
        }
    }

}



/*
懒加载
在h5的标准下
oDiv.offsetWidth //获取div宽度
oDiv.offsetHeight //获取div高度
oDiv.offsetTop //距离网页上面宽度
oDiv.offsetLeft //距离网页左面宽度
document.documentElement.clientHeight //可视区高度
document.documentElement.clientWidth //可视区宽度

配合 window.onscroll = function(){
//document.body.scrollTop用于搜狗，document.documentElement.scrollTop用于谷歌
document.title = document.body.scrollTop || document.documentElement.scrollTop; //卷起高度

}去用
*/
</script>
</body>
</html>

低调的小犬_Hansen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现懒加载

我所使用的方法：在写网页img标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性eg：data-src。将路径放入这个自定义的属性中。那么在加载页面时，这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时，将data-src中的路径赋值给src属性，并开始加载。代码实现<!DOCTYPE html><html lang="en">&l...
复制链接

扫一扫

专栏目录