[js] 图片懒加载

最新推荐文章于 2022-11-14 12:07:33 发布
最新推荐文章于 2022-11-14 12:07:33 发布
阅读量363 收藏 1
点赞数
分类专栏： # js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/120759493
版权

懒加载使用场景

在一些图片量比较大的场景（电商首页，小程序首页等），如果我们打开页面时就加载所有的图片，那势必会导致页面的卡顿以及白屏，给用户不好的体验，导致用户流失。
但是我们仔细想一下，用户真的需要我们显示所有图片一起展示吗？其实并不是，用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化，只显示用户可视区域内的图片，当用户触发滚动的瞬间再去请求显示给用户。

懒加载的思路

一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值

懒加载的问题

图片懒加载

  • 只有进入(即将进入)可是区域的图片才进行加载 item.src = item.dataset.src
  • 如果没有进入可视区域的图片不进行加载

问题1: 如果你希望实现图片懒加载, 那么渲染页面的时候, img 的 src 还能写吗 ?

  • 不能
  • 但是有需要直到该 img 标签应该引入的是哪一张图片
  • 所以我们以一个自定义属性的形式, 来把该 img 需要的图片地址记录在标签身上

问题2: 获取元素img

  • 不能在全局获取img

问题3: 当你第一次滚动的时候, 遍历所有图片，当你向下滚动的时候, 前面的图片已经加载过了，你再次遍历的时候还需要遍历吗 ? 不需要了

  • 如果这个 img 标签已经有 src 属性了, 说明已经加载过了，就不需要判断高度了
if (item.src) return

图片什么时候进入可视区域
在这里插入图片描述
当scrollTop+clientHeight> offsetTop时候，可以加载新的图片了

加个50px,提前一点点距离加载新的图片
在这里插入图片描述

懒加载的实现

  <ul>
  </ul>

    * {
      margin: 0;
      padding: 0;
    }

    li {
      margin: 30px;
      width: 340px;
      height: 548px;
      border: 2px solid #333;
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
    }

var list = [{"id":625153951363,"name":"2020西太湖国际音乐节","showTime":"2020.09.19-09.20","price":"199-399","city":"常州","address":"常州西太湖中国花卉博览景区北门","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg"},{"id":624506842658,"name":"2020舟山东海音乐节","showTime":"2020.09.04-09.06","price":"200-680","city":"舟山","address":"舟山市朱家尖南沙景区沙滩","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg"},{"id":623216520608,"name":"中国•磐安 2020氧气山水音乐节","showTime":"2020.08.22 周六 16:30","price":"280","city":"金华","address":"金华磐安花溪风景区","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg"},{"id":624345993344,"name":"2020“一生中最爱”七夕演唱会","showTime":"2020.08.25 周二 19:30","price":"180-580","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg"},{"id":624170605605,"name":"东海五渔节之敢潮音乐节","showTime":"2020.08.22 周六 18:00","price":"198-228","city":"舟山","address":"舟山嵊泗五龙乡听海广场(原黄沙村船厂)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg"},{"id":624000957041,"name":"【聚光灯】周四周日爆笑脱口秀剧场","showTime":"2020.08.13-09.27","price":"99","city":"上海","address":"健力士醇黑坊","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01s9Jlz32GdSFv79hIO_!!0-item_pic.jpg"},{"id":623838540974,"name":"2020真世界摇滚演出","showTime":"2020.08.29 周六 20:30","price":"120","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01HWbQXk2GdSFxARpRD_!!0-item_pic.jpg"},{"id":624699066028,"name":"开心麻花首部悬疑惊悚喜剧《醉后赢家》","showTime":"2020.08.25-09.06","price":"80-1080","city":"北京","address":"地质礼堂剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Vv1mQO2GdSFvnmIDs_!!2251059038.png"},{"id":625219995330,"name":"开心麻花经典爆笑舞台剧《乌龙山伯爵》","showTime":"2020.08.25-08.30","price":"80-1080","city":"北京","address":"北京展览馆剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01znXuKj2GdSG6ACMMb_!!0-item_pic.jpg"},{"id":623454281510,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.12 周三","price":"80-1280","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN013YAyeY2GdSFnXwgnQ_!!0-item_pic.jpg"},{"id":625314963280,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.15-08.21","price":"100-1180","city":"上海","address":"虹桥艺术中心","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01Qb8wyX2GdSG30DCl4_!!0-item_pic.jpg"},{"id":622815888793,"name":"开心麻花上海首部原创爆笑舞台剧《皇帝的新娘》","showTime":"2020.08.12-08.16","price":"80-1180","city":"上海","address":"上戏实验剧院","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01uie4Gf2GdSFlp1Rvv_!!0-item_pic.jpg"},{"id":624443634831,"name":"孟京辉戏剧作品《我爱xxx》","showTime":"2020.08.13-08.16","price":"100-380","city":"北京","address":"蜂巢剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01LwdJRL2GdSFtDPtRL_!!2251059038.jpg"},{"id":624095704875,"name":"【8月8日-16日场次周年特惠低至四折】太阳马戏X绮幻之境 - 8月","showTime":"2020.08.12-08.30","price":"360-3460","city":"杭州","address":"杭州新天地太阳剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01iyWOwU2GdSG2iMBsM_!!0-item_pic.jpg"},{"id":624163106935,"name":"高达5公里定向挑战赛","showTime":"2020.09.26 周六","price":"108-388","city":"上海","address":"世纪公园","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01y2n1PI2GdSFtLmEtu_!!2251059038.jpg"},{"id":622064265074,"name":"2020 FORMULA1 中国大奖赛（礼包&福袋）","showTime":"2020.07.04-12.31","price":"120-270","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ZHrnGM2GdSFbZjdUV_!!2251059038.jpg"},{"id":623662985515,"name":"2020ChinaJoy电竞赛事荟萃","showTime":"2020.07.31-10.30","price":"0","city":"北京","address":"请到大麦APP和优酷APP观看","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01RpgBQ82GdSFoMD7h8_!!0-item_pic.jpg"},{"id":618307700815,"name":"2020 FORMULA1 中国大奖赛（服装）","showTime":"2020.05.19-12.31","price":"248-620","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01scI6Ly2GdSFEYDh7P_!!0-item_pic.jpg"},{"id":613334933912,"name":"2020 FORMULA1 中国大奖赛（周边衍生品）","showTime":"2020.03.11-12.31","price":"35-160","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ZusbUY2GdSENL0iIN_!!2251059038.jpg"},{"id":613323173822,"name":"2020 FORMULA1 中国大奖赛（帽品）","showTime":"2020.03.11-12.31","price":"200-335","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01azreXu2GdSF9rIkGV_!!2251059038.jpg"},{"id":613940057617,"name":"加速北京跳伞俱乐部高空跳伞体验","showTime":"2020.08.05-08.31","price":"2980","city":"北京","address":"北京市平谷区马坊镇通航产业基地","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ns9MZj2GdSFIp2udB_!!2251059038.png"},{"id":624453755826,"name":"《你是演奏家2 · 超级金贝鼓》","showTime":"2020.08.21-08.23","price":"180-380","city":"上海","address":"美琪大戏院","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN016u70M62GdSFrTL5GP_!!0-item_pic.jpg"},{"id":624211844323,"name":"正版授权·大型儿童实景舞台剧《奥特曼宇宙之光》","showTime":"2020.09.05 周六","price":"180-580","city":"海口","address":"海南省歌舞剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ybwkiZ2GdSFy9894v_!!2251059038.jpg"},{"id":624672730925,"name":"全国正版授权大型互动式儿童舞台剧 海底小纵队2—火山大冒险","showTime":"2020.11.15 周日","price":"80-480","city":"上海","address":"黄浦剧场-中剧场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01mfDv5t2GdSFwbhzvt_!!0-item_pic.jpg"},{"id":624868314578,"name":"大船文化·加拿大原版音乐启蒙全场互动亲子剧《你是演奏家2·超级金贝鼓》","showTime":"2020.09.06 周日","price":"180-380","city":"天津","address":"津湾大剧院大剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01l16ZUE2GdSFzGWSPx_!!2251059038.png"},{"id":624450522367,"name":"大船文化·法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.09.06 周日","price":"120-280","city":"南京","address":"江苏大剧院--综艺厅","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01FMizHi2GdSG0AINxP_!!2-item_pic.png"},{"id":623125350409,"name":"大船文化 法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.08.27-08.30","price":"80-480","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01CiAVft2GdSFpIawAw_!!2251059038.jpg"},{"id":623975390263,"name":"正版授权大型实景舞台剧《奥特曼：宇宙之光》（杭州站）","showTime":"2020.12.13 周日","price":"68-480","city":"杭州","address":"杭州剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01fUBSCY2GdSFsbnPPh_!!2251059038.jpg"}]


    const ul = document.querySelector('ul')

    bindHtml()
    // 1. 渲染页面
    function bindHtml() {
      let str = ''
      list.forEach(item => {
        str += `<li><img data-src="${ item.pic }" alt=""></li>`
      })
      ul.innerHTML = str

      // 只要渲染完毕页面, 执行 lazyload 图片懒加载
      lazyload()
    }

    // 2. 实现图片懒加载
    function lazyload() {
      const imgs = ul.querySelectorAll('img')

      // 2-1. 遍历拿到每一个 img
      imgs.forEach(item => {

        // 优化处理
        // item 就是每一个 img 标签
        // 如果这个 img 标签已经有 src 属性了, 说明已经加载过了，就不需要判断高度了
        if (item.src) return

        // 2-2. 拿到每一个图片距离顶部的尺寸
        const img_top = item.offsetTop
        const window_height = document.documentElement.clientHeight
        const scroll_top = document.documentElement.scrollTop || document.body.scrollTop

        // 2-3. 判断某一张图片进入页面了
        if (img_top - 50 <= window_height + scroll_top) {
          // 需要加载当前这一张图片了
          item.src = item.dataset.src
        }
      })
    }

    // 要求 lazyload 随着浏览器的滚动随时执行
    window.onscroll = function () {
      lazyload()
    }

在这里插入图片描述




参考： [前端性能优化-图片懒加载（防抖、节流）](https://juejin.cn/post/6844904035258990606)
533_
关注
专栏目录
JS图片懒加载的优点及实现原理
10-15
JS图片懒加载是一种常见的前端性能优化技术，通过延迟加载页面上的图片资源，仅在图片出现在用户的视窗范围内时才进行加载。这种方式可以有效地减少页面初次加载时发送的HTTP请求次数、降低服务器的压力，以及提升...
前端性能测试
汪敏的博客
09-08 829
前端性能测试 Lighthouse 是谷歌开源的一款 Web 前端性能自动化测试分析工具，主要用于改进网络应用的质量，我们只需要为其提供一个被测网址，它就能自动进行一些测试，最终会生成一个包括页面性能、PWA（Progressive Web apps，渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO 的报告清单提供参考。 我们可以通过 Chrome 开发者工具、Chrome 扩展、命令行、Node Module 使用 Lighthouse。 以 Chrome 开发者工具为例，使用方
网页的加载渲染速度分析及网页支持程度和兼容性
chencangui的专栏
09-13 1576
在同样的网络的情况下，网页的加载速度越快，用户体验会越好，于是有人就想问了，那么用什么方式来测试网页的加载渲染速度呢？下面介绍几种方法： 一、用秒表来测试。 操作步骤也比较简单，就不详细说了，要注意的是把APP的缓存先清除掉，减少误差。这种方式测出来的结果也有点粗糙。 二、使用第三方的测试工具，Stopwatch。这是一个比较常用的网页打开速度的测试小工具，可以用在PC端也可以用在移动端。测
前端本地测试，模拟后台数据渲染到前台页面
weixin_30326745的博客
01-10 506
和后台交互前前端先本地测试一下，后期只需要修改一下请求地址的url即可： （1）：在本地新建json文件，名字任意取（比如aa.json） 文件在项目中的目录如下： aa.json文件内容如下： { "data":[ { "receiveAdd":"111111111111111111", "sendAdd":"222222", "distance":9.463...
通过chrome调试器测试了解浏览器解析和渲染HTML的过程
东篱与南山
04-25 4324
1.基础知识：了解chrome的Timeline工具仅仅是通过理论知识，很难记住和理解浏览器解析html的原则，因此我动手做了些小实验。而做这个实验，不得不用到一个工具：chrome的Timeline工具。这个工具真的很强大，Timeline工具栏提供了对于在装载Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，
页面渲染的两种方式
weixin_42943920的博客
01-23 2194
1 前后端分离 +后端提供数据，前端使用ajax请求数据，再进行页面的组装和渲染 2 服务端渲染 +前端只负责浏览器打开页面，发送请求 +服务端接收到请求后，在服务端准备好页面； +前端只需要提供一个浏览器，负责显示就好 关于服务端渲染页面 // +需要使用一个第三方模块 art-template(模板引擎) // +下载，命令行指令：npm install art-template // +导入： let template = require(‘art-template’) // 数据渲染的方法： //
js实现图片懒加载效果
10-19
在本文中，我们关注的是如何利用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图片懒加载技术的实现过程，通过这种方式，我们可以显著提升网页加载速度，特别是在移动设备上，节省用户的流量，同时提升页面的性能和用户体验。在实际应用中，还可以根据需求进行各种定制，比如添加预...
某网站前端页面性能测试
weixin_34238642的博客
04-08 2837
1页面性能测试概述页面性能测试则是针对于页面性能优化而开展的一种性能测试，目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议，最终提升系统的整体性能表现，提高用户体验满意度。他的关注点是在与页面，不在于后端。有别于我们通常说的性能测试。相对于C/S架构的应用系统，Web应用系统所有数据都需要从服务器端下载，虽然浏览器有缓存机制，但客户每次访问仍然需要下载...
web页面渲染（一）
weixin_34242331的博客
02-11 504
作为开发者，我们经常会面临一些影响我们整个网站结构的决定，其中web开发者一定要做的核心决定之一就是在应用程序中实现逻辑和渲染的位置。这可能比较难，因为有很多不同的方式来构建一个网站。 我们在这一领域的了解主要来源于在过去的几年在Chrome工作期间，一直与一些大的网站的交流得来的。从广义上来讲，我们鼓励开发人员去通过完全rehydrat...
js中的图片预加载
前端三脚猫的博客
06-29 1948
我们在开发中经常会有页面中会加载图片的情况，当要加载的图片过大或者网络不太好的时候，图片位置就会出现空白页面非常影响用户体验。
淘宝/天猫拍立淘API接口（以图搜商品API接口，图片搜索API接口，图片搜索商品API接口）代码对接教程
weixin_19970108018的博客
08-26 1077
淘宝图片搜索商品API接口，淘宝图片搜索API接口，淘宝拍立淘API接口，淘宝以图搜索商品接口，图片搜索API接口，拍立淘API接口，天猫图片搜索商品接口，天猫图片搜索接口，天猫拍立淘接口，天猫以图搜索商品接口，拍立淘接口，以图搜商品接口，以图搜货接口，图片识别商品接口，以图搜索淘宝商品，以图搜索天猫商品，图片上传搜索接口，图片上传搜索商品接口...
js图片加载
weixin_47627529的博客
06-17 879
图片懒加载 图片懒加载原理：前端工程师在做页面优化的时候，如果页面中是类似图片列表的结构，会考虑使用懒加载技术来优化页面的加载速度 在html页面里写，把js引入html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
js图片懒加载原理、实现及节流优化
m0_45382009的博客
02-27 2162
1.懒加载原理 在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。 2.具体实现 1. 效果 2. 代码如下： <style> .imgList{ width: 600px; } .lazy { width: 600px; } </style> <body>
通过js实现图片懒加载的原理及代码
m0_72742557的博客
11-14 1500
所谓图片懒加载，就是想让页面在展示图片的时候，不一下子全部开始加载，而是等到屏幕快滑到该图片的时候，再开始加载，这样做的好处，提高网页加载效率，节省用户流量
JS批量加载图片是否完成
饶艳辉
08-16 674
项目中JS异步加载图片，且需要在图片全部加载完成后调用第三方插件对图片进行自动排版 难点在于，如何判断异步加载的图片都加载完毕？废话不多说，直接上代码，如下： /** * 菜单点击后, 数据区显示 * @param {Object} _TYPE_ * @param {Object} _KEY_ */ function loadPortfolioItem(_TYPE_, _KEY_) { // <!-- <p></p> 调整子菜单导航栏和搜索后高度不一致问题。没有
关于JavaScript图片懒加载与防抖节流
零信号的博客
04-23 954
什么是图片的懒加载？ 当图片进入浏览器的可视区域，才加载该图片。这样大大加快了对与图片较多的页面的加载熟虑。例如一些较大型网上商城，一个页面有很多的图片，如果不使用懒加载，用户进入网页的速度会相当慢，这样用户体验可能就没那么好了。 实现原理：页面的<img>标签中不设置src属性，将图片的链接写到data-XXX(XXX自定义)，当img标签中没有src属性，那么浏览器就不会去发请...
使用CSS、JavaScript及Ajax如何实现图片的预加载？
qq_32506555的博客
02-18 742
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享使用CSS、JavaScript及Ajax实现图片预加载的三个不同技术，来增强网站的性能与可用性。一起来看看吧，希望对大家学习web前端有
js图片懒加载
最新发布
06-02
在使用 JavaScript 实现图片懒加载时，可以先将图片的 src 属性设置为一个占位符（例如一张空白的小图片），然后通过监听页面滚动事件或其他触发条件，判断图片是否进入浏览器的可视区域内，如果是，则将占位符替换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值