js图片懒加载

最新推荐文章于 2024-02-20 14:17:07 发布
最新推荐文章于 2024-02-20 14:17:07 发布
阅读量270 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiehong1020/article/details/124213343
版权

这里默认让它显示加载中的图片，把需要显示的图片放到制定义属性上，通过监听滚动条和当前图片的位置，当前图片出现在可视区时显示回图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小小菜鸟</title>
    <style>
        img{
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" />
<img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" />
<img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" />
<img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" />
<img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" />
<img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" /><img data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682167&t=cc8c56b4d295311f227040f6e28bb941"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F30c617ebaf20069347f448349057ab02e3ca79e94250a-4yIHvK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652682210&t=bae70f2c35c3140c6d18cdb0804cb5dd"
     alt="" />
<body>

<script>
    //获取全部img标签
    var images = document.getElementsByTagName("img");

    window.addEventListener("scroll", (e) => {
        //当发生滚动事件时调用ergodic事件
        ergodic();
    });
    function ergodic() {
        // 遍历每一张图
        for (let i of images) {
            //判断当前图片是否在可视区内
            if (i.offsetTop <= window.innerHeight + window.scrollY) {
                //获取自定义data-src属性的值
                let trueSrc = i.getAttribute("data-src");
                //把值赋值给图片的src属性
                i.setAttribute("src", trueSrc);
            }
        }
    }
    //没发生滚动事件时也要先执行一次
    ergodic();
</script>

</body>
</html>
揭小宏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js图片预加载
chen_hua89的博客
03-08 1000
图片预加载有大体有几种方式   1.html标签或css加载图片。 　　显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载（使用window.onload等）。   2.纯js实现预加载 空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为
js-图片懒加载的实现
Skybububu的博客
04-18 800
指当页面加载数据时，只先加载浏览器可视区的图片，而不是直接加载页面中所有图片。只有当鼠标滚轮往下滑，才加载后面的图片。
js---《实现图片的懒加载》
AAAXEC的博客
11-09 1130
定义：当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。作用： 减少或延迟请求数，缓解浏览器的压力，增强用户体验 如何实现： 1.设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址 2.页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中 3.当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址
JS实现图片懒加载效果
春雨惊春.
07-05 477
文章目录前言一、图片实现懒加载步骤二、案例练习（三国女将）1. html 代码2. css 代码3. js 代码执行结果 前言 懒加载时一种也页面效果，可以提高页面加载速率，并降低服务器的贷款和资源损耗。 一、图片实现懒加载步骤 先清空图片的 src 属性值，以使浏览器不加载图片 然后再在需要加载图片时，为图片添加上 src 属性 二、案例练习（三国女将） 1. html 代码 <!doctype html> <html lang="en"> <head>
【JS】3种常见图片懒加载方法
zlting_的博客
04-20 563
图片懒加载应用于多图项目中，一起看看以下三种懒加载方法如何实现的吧！
JS中三种实现懒加载的方法！
weixin_74535649
08-10 3515
JS中三种实现懒加载的方法！
JS图片懒加载的优点及实现原理
10-15
主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
原生JS实现图片懒加载之页面性能优化
10-17
原生js实现图片懒加载 *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ overflow: hidden; list-style: none; } li{ float: left; width: 50%; height: 200px; padding: 10px; } li img{ display: ...
JS图片懒加载技术实现过程解析
10-15
以上就是JS图片懒加载技术的实现过程，通过这种方式，我们可以显著提升网页加载速度，特别是在移动设备上，节省用户的流量，同时提升页面的性能和用户体验。在实际应用中，还可以根据需求进行各种定制，比如添加预...
js实现图片懒加载效果
10-19
主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js如何实现图片的懒加载
A_hapiness的博客
07-06 1584
前端js实现图片的懒加载 缓解长页面多图片下的压力
JS 实现图片懒加载
wu_2004的博客
10-13 247
在HTML中，为要进行懒加载的图片元素添加一个占位符，通常是一个小尺寸的透明图片或者一个简单的`<div>`元素。- 为每个要懒加载的图片元素添加一个自定义数据属性，例如`data-src`，用于存储原始图片的`src`属性的值。实现图片懒加载的思路是延迟加载页面中的图片，只有当用户滚动到图片可见区域时才加载图片，以减少初始页面加载时间和网络带宽的使用。- 当图片进入可见区域时，通过JavaScript将`data-src`属性的值设置为`src`属性，从而加载原始图片。这会触发浏览器下载图片。
通过js实现图片懒加载的原理及代码
m0_72742557的博客
11-14 1484
所谓图片懒加载，就是想让页面在展示图片的时候，不一下子全部开始加载，而是等到屏幕快滑到该图片的时候，再开始加载，这样做的好处，提高网页加载效率，节省用户流量
JS实现图片懒加载的三种方式
qq_45487080的博客
02-23 1922
实现图片懒加载的三种方式
js实现图片懒加载，图片预加载
小龚的博客
03-22 4936
欢迎点击: 个人官网博客 预加载(进度) 比如一些公众号h5宣传页面，受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 进入页面的时候把图片全加载一遍，就不会出现图片加载慢显示慢的情况 效果图： <script> //页面所有img标签的集合 let img = document.getElementsByTagName("img"); function yuLoad() { let index = 0 for
简易版-图片懒加载-原生js
最新发布
Xue_BT的博客
02-20 413
原理：将需要懒加载的图片src设置为loading图片，然后将data-src设置为图片原路径。待页面滚动到合适距离之后，就加载相应的图片。
JavaScript的懒加载处理
杜永康的博客
10-12 1779
懒加载（Lazy Loading）是一种优化技术，它可以延迟加载某些资源，直到它们真正需要被使用的时候才进行加载。这种技术可以提升应用程序或网站的性能，减少初始加载时间。
JavaScript实现懒加载
weixin_51422386的博客
12-05 3050
项目性能优化
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值