原生js实现图片懒加载

1.图片懒加载能够提升网页的加载速度，进而提升了系统的性能
具体代码如下

 <body>
    <img src="./images/loading.gif" data-src="./images/Sticker01.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker02.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker03.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker04.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker05.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker06.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker01.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker02.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker03.png" alt="">
    <script>
        let num = document.getElementsByTagName("img").length
        let imgs = document.getElementsByTagName("img")
        // console.log(num);
        // console.log(imgs);
 
        lazyload()
        // 窗口滚动时，重新调用懒加载方法
        window.onscroll = lazyload
        function lazyload(){
            // 视口高度
            let seeHeight = document.documentElement.clientHeight;//可见区域高度
            // 滚动条距离视口顶部的高度
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            for(let i=0; i< imgs.length;i++){
                // 判断当前的图片是否位于可视窗口范围内
                if(imgs[i].offsetTop < seeHeight + scrollTop){
                    // 如果当前图片为默认的加载图片，则替换相应的图片
                    if(imgs[i].getAttribute("src") == "./images/loading.gif"){
                        imgs[i].src = imgs[i].getAttribute("data-src")
                    }
                }
            }
        }
    </script>
</body>

posted @ 2023-01-05 15:14 胡同树下阅读(125) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· element-点击表格某一行携带参数跳转到另一个页面-路由携参

· el-table表头固定不滑动

· 图片懒加载

· 原生js实现图片懒加载

· 利用jquery实现图片懒加载

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

公告

昵称：胡同树下
园龄： 2年11个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

胡同树下你和我

原生js实现图片懒加载

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<body>
	<img src="./images/loading.gif" data-src="./images/Sticker01.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker02.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker03.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker04.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker05.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker06.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker01.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker02.png" alt="">
	<img src="./images/loading.gif" data-src="./images/Sticker03.png" alt="">
	<script>
	let num = document.getElementsByTagName("img").length
	let imgs = document.getElementsByTagName("img")
	// console.log(num);
	// console.log(imgs);

	lazyload()
	// 窗口滚动时，重新调用懒加载方法
	window.onscroll = lazyload
	function lazyload(){
	// 视口高度
	let seeHeight = document.documentElement.clientHeight;//可见区域高度
	// 滚动条距离视口顶部的高度
	let scrollTop = document.documentElement.scrollTop \|\| document.body.scrollTop
	for(let i=0; i< imgs.length;i++){
	// 判断当前的图片是否位于可视窗口范围内
	if(imgs[i].offsetTop < seeHeight + scrollTop){
	// 如果当前图片为默认的加载图片，则替换相应的图片
	if(imgs[i].getAttribute("src") == "./images/loading.gif"){
	imgs[i].src = imgs[i].getAttribute("data-src")
	}
	}
	}
	}
	</script>
	</body>