js图片懒加载原理、实现及节流优化

最新推荐文章于 2024-04-07 10:27:51 发布

不能懒鸭

最新推荐文章于 2024-04-07 10:27:51 发布

阅读量2k

点赞数 2

分类专栏：面试 javascript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_45382009/article/details/123171894

版权

1.懒加载原理

在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。

2.具体实现

1. 效果
在这里插入图片描述
2. 代码如下：

<style>
        .imgList{
     
            width: 600px;
        }
        .lazy {
     
            width: 600px;
        }
</style>
<body>
    <div class="imgList">
        <img class="lazy" src="/image/loading.jpg" data-src="/image/1.jpeg" />
        <img class="lazy" src="/image/loading.jpg" data-src="/image/2.jpeg" />
        <img class="lazy" src="/image/loading.jpg" data-src="/image/3.jpeg" />
        <img class="lazy" src="/image/loading.jpg" data-src="/image/4.jpeg" />
        <img class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不能懒鸭

关注关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js图片懒加载原理、实现及节流优化

1.懒加载原理在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。2.具体实现1. 效果2. 代码如下：<style> .imgList{ width: 600px; } .lazy { width: 600px; }</style><body>
复制链接

扫一扫