超简单的图片懒加载

最新推荐文章于 2022-05-10 16:03:40 发布
最新推荐文章于 2022-05-10 16:03:40 发布
阅读量261 收藏
点赞数 1
分类专栏： 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxo_apple/article/details/105653574
版权

图片懒加载

为了优化网页性能，减少网络资源的浪费，我们经常会在有大量静态资源图片时，进行图片懒加载，接下来看看具体操作吧

1.先把所有图片的路径写入data-src中（此时页面不会显示图片）
在这里插入图片描述
2.可以设置一些css动画特效
在这里插入图片描述
3.监听外部div的scroll滚动事件，当图片进入可视区域(imgTop - boxTop <= box.clientHeight)时，设置图片的src为data-src的值，并给图片添加classname = ‘fade’，就完成啦
在这里插入图片描述

getBoundingClientReact().top是距离顶级父元素的高度，imgTop - boxTop <= box.clientHeight时，说明图片此时进入可试区域

zxo_apple
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【网页性能优化】-—— 关于图片懒加载
yan的秘密基地
07-21 1125
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。全部加载的话会影响用户的体验浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量提示以下是本篇文章正文内容，下面案例可供参考。...
实现图片懒加载的5种方式
maidu_xbd的博客
05-24 7807
offsetTop（图像距离顶部的高度）-scrollTop(页面被卷去的高度)
实现图片懒加载的两种方法
Alice_yo的博客
08-11 4241
懒加载及应用场景 懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 实现的思路：： 给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-）， 监听scroll事件，当图片出现在可视区时，将data-src值赋值给src
懒加载静态资源
weixin_42539854的博客
05-10 206
懒加载 当我们需要加载静态资源（比如图片）时，可以判断元素是否出现在可视区域，当即将出现时再加载，以此节省带宽 方法一：通过判断视口高度与元素距离文档顶部的高度和滚动条卷去的高度的差值，确定元素是否出现在可视区域 const box = document.querySelector('.box') // 获取视口高度 let clientHeight = document.documentElement.clientHeight // 元素相对于文档顶部的高度 c
原生JS实现最简单的图片懒加载
weixin_33725239的博客
08-19 679
原文地址：原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时...
vue实现图片懒加载的方法分析
11-21
本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考，具体如下： vue图片懒加载使用 首先第一步，安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad...
html5+js（支持手机页面）图片懒加载
09-20
HTML图片懒加载,亲测可用,插件也比较小,使用起来挺方便的.根据jquery 提供的 lazyload.js 插件实现图片懒加载，demo 在最下面。 lazyLoading.js 可以缓解庞大项目的网络压力lazyLoading.js图片懒加载
图片懒加载（延迟加载）
08-13
图片懒加载（延迟加载）
JS图片预加载插件详解
12-02
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 2)区别： 两种技术的本质：两者的行为是相反的，一个是提前...
JS实现图片延迟加载并淡入淡出效果的简单方法
10-21
我们大家都知道，对于一个网站最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，作为一个站长我们是千方百计的使用各种技巧来优化图片，但其实有一种简单的方法，只需要几行代码就能达到这种效果。...
简单的图片懒加载实现
11-29
简单的图片懒加载实现
fall一个简易的懒加载瀑布流
08-10
fall 一个简易的懒加载瀑布流
“懒”的妙用——浅析图片懒加载技术
前端大全
12-24 2644
（点击上方公众号，可快速关注）作者：火头军人 - 朱思逸http://mp.weixin.qq.com/s/JYglEGYN9tnGpDg7ARPx7w1、定义图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该
前端实现图片懒加载(lazyload)的两种方式
w001yy的博客
10-20 3917
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 懒加载
JS实现图片懒加载的几种简单方式，图片懒加载
MFWSCQ的博客
08-28 1538
记得以前手机端有个业务时将用户上传的的图片在用户往上滑动手机的时候呈现，由于刚开始用户数量少就没留意，直接将后台的数据拉过来渲染，当时后台也没有分页，可是后来参与用户多了起来，跳转到这个页面就渲染个几十几百张的去请求数据，然后服务器就崩了，所以这种情况就需要用到懒加载。当需要的时候再发送图片请求，避免打开页面加载过多资源。 原理介绍： 我们使用img标签来显示图片，img标签有src属性用来表...
html页面图片延迟加载,实现图片懒加载的几种方法
weixin_36386044的博客
06-03 2512
懒加载就是延时加载，即当对象需要用到的时候再去加载。本文就来为大家介绍几种实现图片懒加载的方法，希望对大家有一定的帮助。懒加载，顾名思义，在当前网页，滑动页面到能看到图片的时候再加载图片故问题拆分成两个：如何判断图片出现在了当前视口 (即如何判断我们能够看到图片)如何控制图片的加载方案一如何判断图片出现在了当前视口clientTop，offsetTop，clientHeight 以及 scroll...
超详细的图片预加载和懒加载教程
FOR 的博客
09-04 8074
最近接手一个项目 。 结果光安装依赖都出现了一堆 麻烦 。 好不容易处理完一个 ， 又来一个 。头疼啊 看到之前有一些预加载的学习笔记。于是又查查找找 ，想想写写 把预加载和懒加载的笔记写完整 发现制图挺麻烦的！不知道你们有没有什么推荐？ 写了挺久的这篇文章，有什么不对的地方欢迎评论或私聊指出 图片的预加载和懒加载 预加载和懒加载的字眼总会看到 。 其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。 我们较常用或较需要使用的场景就是加载图片资源。 这里，我们也只讨论加载图片资源。.
图片懒加载记录
kuke_kuke的博客
04-23 170
// 图片处理 $.each(data.imgList, function(i, n) { body.contents().find('#panel_imgList').append('<img src="' + tcymjcmJmqr.interfacePrefix + 'app/img/jiazai.gif" data-src="' + tcymjcmJmpr.interfacePre...
vue图片懒加载 最优
最新发布
08-20
实现图片懒加载最常见的方法是使用Vue插件vue-lazyload。 该插件的使用方法如下： 1. 首先，安装vue-lazyload插件。在项目中运行以下命令： ``` npm install vue-lazyload --save ``` 2. 在项目的入口文件中（如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值