渐进式图片解决前端在页面中使用大图,图片体积过大导致页面出现白屏现象

本文主要是介绍渐进式图片解决前端在页面中使用大图,图片体积过大导致页面出现白屏现象,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、演示 

可以看到,图片还在拼命加载的时候, 页面上就已经有内容了

2、什么渐进式图片

图片一开始是模糊的,然后逐渐的开始变的清晰。如果页面上有一些大图,如果直接扔给浏览器的话那么图片的传输时间就会比较长,用户就会长时间陷入白屏。那么可以先展示一个小图,因为小图的尺寸小,所以说它能够快速的显现出来,然后呢再逐步的给它传输大图,大图传输完成之后再显示大图,这就是渐进式图片

3、实现方法

3.1 啥也不用做

直接让设计师给你的图片就是渐进式图片就行,渐进式图片实现原理,jpg图片实际上是可以支持多帧的平时拍照或者是截图,一般都是单帧也就是1帧,但实际上是可以支持多帧的,我们只需要在第1帧里面放一个模糊的小图,第二帧的时候呢放一个高清的大图,那么在传输的时候首先收到的是1个小帧,这个很快就传输完了,接下来浏览器会自动处理先把他渲染出来,等一会再传输大帧的时候呢再一步一步去替换小帧,丰富里面模糊的细节,虽然添加了帧数,但是图片的大小不会有明显的变化,这根jpg里面的内部数据格式相关,这里就不说了

这种方法的缺点就是可能有些老浏览器不兼容,可能还有就是设计师不给你做

3.2 代码实现

实现原理:在最开始的时候,大图是隐藏的,小图示显示的,等大图加载完成,显示大图,隐藏小图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.bigImg {width: 100%;height: 100vh;}.smallImg {width: 100%;height: 100vh;}</style></head><body><img src="./big.png" alt="" class="bigImg" style="display: none" /><img src="./samll.png" alt="" class="smallImg" style="display: block" /></body><script>const bigImg = document.querySelector('.bigImg')const smallImg = document.querySelector('.smallImg')bigImg.addEventListener('load', function () {console.log('大图已加载完成,小图隐藏,大图展示')bigImg.style.display = 'block'smallImg.style.display = 'none'})</script>
</html>

这篇关于渐进式图片解决前端在页面中使用大图,图片体积过大导致页面出现白屏现象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/874820

相关文章

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab