页面图片加载慢解决方案

一、问题：

页面图片加载很慢或访问图片路径，服务器返回图片慢

二、解决方案

方案一、压缩图片

如果当前图片为png格式，你可以转化成jpg格式，图片体积会小很多，这样可能问题会直接解决

方案二、使用base64替换图片

<img src=“http://www.aimks.com/images/wg.png”/>

替换一个写法

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEU
gAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZS
BJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR
0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1C
KSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjz
MVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

页面图片加载慢解决方案相关推荐

【Vue】—解决页面图片加载抖动的问题
[Vue]-解决页面图片加载抖动的问题问题如下解决办法 overflow:hidden; height:0; padding-bottom:*; // 其中*处填图片的高宽百分比=高/宽*100 ...
前端页面图片加载失败如何处理
换成默认背景图片或隐藏方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时默认显示统一处理document.addEventListener("error", fun ...
前端页面图片加载优化
前端页面图片加载优化问题:前端页面如果图片资源过多或者过大就会导致用户加载图片时间过长,导致用户体验下降我总结的优化思路与方法有以下几种一.将图标换成icon字体管理如果项目存在大量的图表用的 ...
bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
前端页面图片加载失败显示默认图片
方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时默认显示统一处理 document.addEventListener("error", function (e) { ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
jquery 当页面图片加载之后_在浏览器地址栏输入地址到页面渲染完成发生了什么？（下）...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...
ElementUI - ＜el-image＞ src 属性使用本地图片加载失败解决方案
前言如下代码所示,会造成加载失败: <el-image style="width:50px; height:50px;" src="../assets/banne ...
el-image src 属性使用本地图片加载失败解决方案 Cannot find module ‘../../xxx‘
参考博客参考博客2 <el-image src="../assets/xxx.png" /> 使用 require 引入 <el-image :src=&quo ...

页面图片加载慢解决方案

一、问题：

二、解决方案

页面图片加载慢解决方案相关推荐

最新文章

热门文章