我的前端笔记之 懒加载 与 节流

最新推荐文章于 2024-03-17 23:17:34 发布
最新推荐文章于 2024-03-17 23:17:34 发布
阅读量233 收藏 2
点赞数
文章标签： 前端 懒加载 节流 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ke799289945/article/details/82752249
版权

写在前

大家好，我又来霍霍大家了，切图仔报道。记一次面试被问到京东、淘宝是如果做前端性能优化的，在这我也不怕你们鄙视我了，我只是说了一些超低级的就是 做雪碧图啊、压缩图片、压缩js、css ，引用外部文件。css 放head js 放/body ，减少DOM 操作啊之类的等等。

嗯，没错，我只看到了面试官那鄙视的眼神。。。。

废话不多说了，回来后查了点资料 然后有懒加载 和预加载，下面简要介绍一下：

1.what ?

懒加载 俗称延迟加载、是指在一些长页面中延迟加载图片，当img出现在用户可视区域后才加载，是一种良好的页面性能优化方式，适用于 一些大型电商网站比如上面说的那两个。

2.why ？

 

  • 减少不必要的加载   第一眼不出现在用户面前的图片可以不让其加载，减少http请求次数
  • 良好的用户体验   当你上京东购物，n张图片都需要加载，网速快的不说啥了，网速慢的等你加载完黄花菜都凉了

3.principle

 

第一步、先把页面图片的src置空，不让其发送请求，把真是图片地址放置在 自定义属性中data-url="xxx.jpg";

第二步、当页面开始滚动需要监听scroll事件，在事件回调函数中，我们判断一下图片是否进入了可视区域，如果图片在可视区域，那么我们就把自定义的属性（data-url）赋值给 图片的 src属性

懒加载的东西说完了，这里不得不提一嘴节流，因为面试官可能会问你一嘴 那懒加载频繁触发 scroll 会不会加重浏览器的负担，造成页面的崩溃啊 ？

请你用节流堵住他的嘴。

4.throttle

其实节流就是 节流嘛！ 节约流量（开玩笑哈），我只知道是在你定义的时间间隔之外才调用函数，这样就可以大大的限制用户操作页面频繁触发的scroll 了，大大的提高了浏览器的性能，不过你放心，微妙的时间，用户是不会发觉的。

5.上代码了

 

<!DOCTYPE html>
<html lang="zh-cn">

<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>Document</title>
</head>

<body>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>
    <p><img data-url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536996013034&di=1f4c4bfb8a0e208a79ee16de908fffd1&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F37d12f2eb9389b50551d887c8835e5dde7116e39.jpg" height="265" alt=""></p>


    <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>


    <script>
        // 先调用，保证可视区域的图片显示
        lazy();
        function lazy() {
            var imgS = Array.from($('img'));   // 获取页面 img 元素数组
            // console.log(imgS)
            var imgL = $('img').length;  // 获取页面 img 元素数量
            // console.log(imgL)
            var seeHeight = $(window).height();  // 获取页面 可视区域高度
            // console.log(seeHeight)
            var scrollT = $(document).scrollTop();   // 获取页面滚出 高度
            // console.log(scrollT)
            // 开始遍历 这个数组
            for (var i = 0; i < imgL; i++) {
                // console.log($(imgS[i]).offset().top + "  /")
                // console.log(seeHeight + scrollT)
                // 如果当前元素 出现在可视区域后 
                if ($(imgS[i]).offset().top < seeHeight + scrollT) {
                    //如果 当前自定义的 url 不为空
                    if ($(imgS[i]).attr("data-url") !== "undefined") {
                        // 把自定义属性地址 赋值给 img.src 
                        $(imgS[i]).attr("src", $(imgS[i]).attr("data-url"))
                    }
                }
            }
        }

    // 用户频繁操作 scroll  不免造成页面性能不佳 此刻当然需要配合 节流 使页面性能更加优化

        function throttle(fn, delay) {  // 定义的参数函数和延迟时间
            var begin = new Date();
            return function () {
                var curtimer = new Date();
                var contxt = this,
                    args = arguments;
                if (curtimer - begin > delay) {  // 时间间隔 > 定义时间 才执行
                    fn.apply(contxt, args);
                    begin = curtimer;
                }
            }
        }
        $(document).scroll(throttle(lazy, 100)); // 滚动时间 在100ms 内只执行一次
    </script>
</body>

</html>

虚心接受你们的鄙视。

ke799289945
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack学习笔记之优化缓存、合并、懒加载
08-29
本篇学习笔记重点探讨了 Webpack 的优化策略，包括缓存管理、文件合并以及懒加载，旨在提升项目的构建速度和用户体验。 一、缓存优化 Webpack 在每次构建时都会重新处理所有模块，这可能导致编译时间过长，特别是...
图片懒加载
huangpb的博客
02-13 6692
一、什么是懒加载？ “懒加载”即：延迟加载，对于一个很长的页面，优先加载可视区域的内容，其他部分等进入可视区域时再加载。 二、为什么要懒加载？ 懒加载是一种网页性能优化的方式，它能极大的提升用户体验。比如一个页面中有很多图片，但是首屏只出现几张，这时如果一次性把图片全部加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区再加载。优化首屏加载。 总结出来就两个点： 1.全部加载的话会影响用户体验 2.浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量。 懒加载优点：页面加载速度快
【前端性能优化】前端懒加载
weixin_44680009的博客
07-21 2992
前端懒加载
前端懒加载的N种玩法分享(技术进阶)
趣谈前端
02-16 1374
今日寄语: 生活嘛, 慢慢来, 你又不差. 前言性能优化系列文章又更新啦，这次主要是和小伙伴们来介绍一下懒加载以及相关的玩法。懒加载是前端性能优化中很重要的一环，可以有效地降低首页的白屏时间，并且可以广泛地应用到小伙伴们的项目中。提到懒加载，前端的小伙伴们通常的第一想法就是图片的懒加载啦。哈哈哈，其实懒加载并不止局限于图片懒加载，它也是有很多的应用场景。别着急，咱们一个一个的来介绍。im...
前端技术-懒加载
xxj123_的博客
08-12 518
这里设置了一个样式来获取img节点(注：这里为什么不使用img属性来直接获取，下面再解释)（如下图，img存放的是一个用来过渡显示的图片，并不是真正的图片。注意（如果此时我们直接调用，只能显示页面打开一开始就小于浏览器高度的图片，因为只默认调用了一次，而现在需要的是滚动条滚动再触发，所有要绑定一个滚动事件）,这样就随着滚动条滚动触发事件。实现思路，当元素的距离浏览器的距离大于了浏览器的可视高度，就需要渲染图片。此时页面显示的效果就是我们准备好的，默认显示的图片(当然在真正的开发中，可能不需要默认图片)
vue2笔记 — vue-router路由懒加载的实现
12-09
懒加载允许我们在用户实际需要时才加载数据或资源，而不是一次性加载所有内容，从而减少了初始加载时间，提升了用户体验。在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型...
微前端笔记微前端笔记微前端笔记
最新发布
07-19
微前端笔记微前端笔记微前端笔记
JS实现懒加载以及加载进度实现 - 手把手从页面到核心详解
q145p152的博客
06-23 1931
前端懒加载技术对于现在来说已经是屡见不鲜，那我们需要知道在什么场景下需要用到懒加载，比如某宝，某东等首页展示，在其浏览商品的时候是可以无限滚动加载的，以及大量的图文展示，也需要用到懒加载，其目的就是为了减轻浏览器渲染的压力从而提升用户体验，按量渲染，而不是嗖的一下把压力全部给到浏览器。
前端懒加载
songshao の blog
08-09 807
根据这个原理，我们使用 HTML5 的data-xxx 属性来储存图片的路径，在需要加载图片的时候，将 data-xxx 中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。
五分钟教你用JS实现前端优化之懒加载与预加载
MCM0115的博客
03-17 1347
快速解决理解什么是懒加载和预加载！通俗易懂max版
js图片懒加载原理、实现及节流优化
m0_45382009的博客
02-27 2080
1.懒加载原理 在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。 2.具体实现 1. 效果 2. 代码如下： <style> .imgList{ width: 600px; } .lazy { width: 600px; } </style> <body>
手把手教你 图片懒加载（使用节流）—— 皮一下 很开心
summer爱前端
08-21 220
快去学一下懒加载，不然学姐打屁股了……
前端优化——懒加载篇
YooHoeh的博客
05-31 1万+
懒加载 1.什么是懒加载 懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 2.为什么要用懒加载 能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，...
前端页面优化之懒加载 -- 搬运自前端大全公众号
m0_46423771的博客
06-09 679
– 懒加载是一种常见的技术，通过按需加载资源来减少网页的数据使用 例： 一旦启用懒加载，只有当用户滚动到需要改内容显示的地方才会去加载。1、减少页面加载时间（PLT）：通过延迟资源加载减少首屏页面加载时间。 2、优化资源消耗：通过资源懒加载优化系统资源使用，这在内存以及处理能力较低的移动设备上效果比较好。1、减慢快速滚动的速度 如果你有一个web应用，比如在线商店，你需要让用户可以快速上下滚动以及导航。对这样的应用使用懒加载会减慢滚动速度，因为我们需要等待数据加载完成。这会降低应用性能以及引发用户体验问题。
【前端】图片懒加载的原理和三种实现方式
热门推荐
qq_44947815的博客
06-14 2万+
图片懒加载的原理和实现方法
前端页面的懒加载和预加载
weixin_53950583的博客
04-12 3065
文章目录前言一、懒加载二、预加载1）使用css和JavaScript预加载2）使用JavaScript预加载3）使用Ajax预加载总结 前言 懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，从而减轻服务器压力，避免用户等待时间过长（一般在网站图片很多的时候使用，比如淘宝，京东等） 预加载则是在进入页面后提前加载图片等资源，等用户用到该图片或
前端实现图片懒加载
cxz
03-10 2787
前言 懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。 总结出来就两个点： 全部加载的话会影响用户体验 浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量 实现方式 1、html 实现 最简单的实现方式是给 img 标签加上 loading=“lazy”，比如
懒加载的实现以及优化（函数节流）
weixin_34290352的博客
04-12 240
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML前端笔记：语义化与CSS、JS结合
笔记还提到了前端开发工具和调试方法，并提供了简单的代码示例来解释概念。" 在web前端开发中，HTML（HyperText Markup Language）主要负责构建网页的内容结构。HTML标签是构成网页的基本元素，例如`<html>`是文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值