面试高频：手把手教你实现图片懒加载

飞鱼呀_

已于 2022-03-24 16:02:28 修改

阅读量1.1k

点赞数

分类专栏：性能优化文章标签：性能优化面试 js javascript 前端

于 2022-03-23 22:59:04 首次发布

本文链接：https://blog.csdn.net/qq_40531647/article/details/123698994

版权

什么是图片懒加载？

如今一张图片的大小可以轻松达到几M的大小，如果一个页面中同时有比较多这样的图片，同时加载的话会造成页面加载缓慢，当目标图片未加载成功时，通常会使用一个小图片占位，例如一个转圈圈的gif来表示图片正处于loading状态，但这改变不了很多图片同时加载带来的加载缓慢的问题。

因此很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载，这样对页面的加载性能有较大提升，同时也改善了用户体验。

主要实现思路如下：

1、img元素的自定义属性上data-xxx上挂载目标图片url, src属性指向默认图片地址。

2、监听图片是否出现在用户的可视区域内。

3、出现在可视区域内后更新src属性为目标图片url。

以下两种实现方式的区别主要体现在第二步。

监听scroll事件+节流实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
  </body>
  <style>
    div {
     
      display: flex;
      justify-content: center;
      flex-direction

最低0.47元/天解锁文章

飞鱼呀_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
面试高频：手把手教你实现图片懒加载

如今一张图片的大小可以轻松达到几M的大小，如果一个页面中同时有比较多这样的图片，同时加载的话会造成页面加载缓慢，当目标图片未加载成功时，通常会使用一个小图片占位，例如一个转圈圈的gif来表示图片正处于loading状态，但这改变不了很多图片同时加载带来的加载缓慢的问题
复制链接

扫一扫