图片的懒加载与预加载
懒加载
懒加载
:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。
懒加载的实现原理是
:将页面上图片的 src 属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的 src 属性,以此来实现图片的延迟加载。
预加载
预加载
:指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间,提高用户的体验。
预加载的实现
:最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 scr 属性,来实现图片的预加载。
图片格式
目前主要的图片分类有JPEG/JPG、PNG、WebP、Base64、SVG
1、JPEG/JPG
关键词:有损压缩、体积小、加载快、不支持透明
JPG 适用于呈现色彩丰富的图片,在我们日常开发中,JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。
当在处理颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显。且JPEG不支持透明图片。
2、PNG-8 与 PNG-24
关键字:无损压缩、质量高、体积大、支持透明
PNG是一种无损压缩的高保真的图片格式。跟JPG相比,有更强的色彩表现力,对线条的处理更加细腻,对透明度有良好的支持。唯一的缺点就是体积有点大。
主要使用场景:主要用来处理小logo、背景图等。
3、SVG
关键字:文本文件、体积小、不失真、兼容性好
SVG(可缩放矢量图形)是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同:SVG 对图像的处理不是基于像素点,而是是基于对图像的形状描述
SVG 与 PNG 和 JPG 相比,文件体积更小,可压缩性更强。
SVG,作为矢量图,它最显著的优势还是在于图片可无限放大而不失真这一点上。
SVG 是文本文件。既可以像写代码一样定义 SVG,写在 HTML 里、成为 DOM 的一部分,也可以把对图形的描述写入以 .svg 为后缀的独立文件(SVG 文件在使用上与普通图片文件无异)。这使得 SVG 文件可以被非常多的工具读取和修改,具有较强的灵活性。
SVG 的局限性主要有两个方面,一方面是它的渲染成本比较高,这点对性能来说是很不利的。另一方面,SVG 存在着其它图片格式所没有的学习成本(它是可编程的)。
4、Base64
作为雪碧图的补充而存在。雪碧图主要是将很多小图合并到一张透明背景上再结合css定位显示特定部分减少网络请求的一种优化方式。
base64把图片进行编码可以将结果写入到html和css中从而减少网络请求。base64编码之后图片会膨胀至原来的40%。
其他文章
图片加载:加载中显示loading,加载成功显示正常图片,加载失败显示默认图片。
图片加载:加载中显示loading,加载成功显示成功图片,加载失败显示自定义内容,可点击重新请求图片
图片的懒加载与预加载相关推荐
- javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
- 图片的懒加载和预加载?
一.写在前面 图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载 图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
- Jquery图片懒加载和预加载
Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
- 页面优化之懒加载与预加载
1.前言 PC端网速较快,现在普通都是百兆宽带,那么折算一下就是10M/s的下载速度,基本上资源如果在10M以内的话加载还是比较快的. 但是移动端就不行了.移动端需要消耗巨额的流量,所以尽量减少移动端 ...
- css 同步加载,同步加载,异步加载,懒加载,预加载
同步加载 默认的就是同步加载 同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
- 懒加载和预加载的区别
概念: 懒加载:懒加载也叫延迟加载,JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 区别: 两者的行为是相反的,预加载是 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
最新文章
- 用这个Python库,训练你的模型成为下一个街头霸王!
- 【51NOD1287】加农炮
- android 购物车抛物线,添加到购物车抛物线动画
- Linux不能读取目录,关于Linux上面无法读取资源目录下文件的问题
- java面向对象第一课,定义类,模拟人的行为:吃饭工作休息
- 并发容器(J.U.C)中的集合类
- BizTalk动手实验(十七)ODBC适配器使用
- AI2想从常识测试开始让AI理解物理世界,数据集已公布
- mysql read uncomit_mysql配置文件,帮看看
- java下载网络文件_java 从网络Url中下载文件
- c语言找最大素数,C语言实现寻找大素数
- Nginx配置https及证书
- rio中安装tms 的web core、sparkle、aurelius、xdata组件
- C# 输入一个正整数N,判断N是奇数还是偶数,输出1~N的奇数和或是偶数和,三种不同方法分别实现
- centos ffmpeg 加水印
- 通达信日线数据用转换为excel、csv和feather格式
- 关键点检测评价指标OKS
- c语言动态分配内存keil,keil5中结构体分配内存问题
- 新版正方教务系统模拟登录登录密码RSA加密破解
- 新研究调查Masimo ORi™(氧储备指数)能否用作避免全麻期间高氧状态的指数