前端页面图片加载优化

前端页面图片加载优化
问题：前端页面如果图片资源过多或者过大就会导致用户加载图片时间过长，导致用户体验下降
我总结的优化思路与方法有以下几种

一、将图标换成icon字体管理
如果项目存在大量的图表用的是图片展示会大大降低加载速度，这里推荐使用icon
下面列举阿里图标库使用3种方法：

unicode使用步骤如下：
第一步：拷贝项目下面生成的font-face
@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用iconfont的样式
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">&#x33;</i>unicode是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

font-class 引用
第一步：拷贝项目下面生成的fontclass代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-xxx"></i>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

symbol 引用
第一步：拷贝项目下面生成的symbol代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用css代码（引入一次就行）：
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>与上面两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

二、把图片在不影响画质的情况下进行压缩

我们可以借助一些第三方软件来进行压缩,比如https://tinypng.com/,压缩后分辨率不变,肉眼看不失真

三、前端实现图片懒加载

实现原理：

1、将页面中的img标签src指向一张小图片或者src为空，
2、然后定义data-src属性（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。
3、src指向一张默认的图片，否则当src为空的时候也会像服务器发送一次请求（指向默认的一张图片那就只需要请求一次）。可以指向loading的地址。
4、当载入页面时，先把可视区区域内的img标签的data-src属性值赋值给src。
5、然后监听滚动事件，加载用户即将看到的图片（利用图片出现时距离顶部的高度 < 滚动条距离顶部的高度 + 可视区的高度）。

图片懒加载的实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {display: block;margin-bottom: 50px;width: 800px;height: 400px;}</style>
</head>
<body><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg6.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg7.png" alt=""><img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t" alt=""><img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg" alt=""><img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""><img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t" alt=""><img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg8.png" alt=""><img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg10.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg11.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg15.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg16.png" alt=""><img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg17.png" alt="">
<script>(function(){let num = document.getElementsByTagName('img').length;let img = document.getElementsByTagName("img");let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历lazyload(); //页面载入完毕加载可是区域内的图片window.onscroll = lazyload;function lazyload() { //监听页面滚动事件let seeHeight = document.documentElement.clientHeight; //可见区域高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度for (let i = n; i < num; i++) {// 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度if (img[i].offsetTop > seeHeight + scrollTop) {if (img[i].getAttribute("src") == "") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}})()</script>
</body>
</html>

使用节流函数进行优化：

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器性能。
同时还有以下场景往往由于事件频繁被触发，因而频繁执行dom操作，资源加载等重行为，导致UI停顿甚至浏览器奔溃。
1、window对象的resize，scroll事件；
2、拖拽时的mousemove事件；
3、射击游戏中的mousedown，keydown事件；
4、文字输入，自动完成的keyup事件；
解决这个问题的方法有去防抖和节流的方法：
1、防抖动原理：当调用动作n毫秒后，才会执行，若这n毫秒内又调用此动作则重新计算执行时间。
不足:当我一直滚动鼠标的时候，lazyload函数就会不断被延迟，这样只有停下来的时候才会执行，那么再有些需要及时显示的情况下，就显得不那么友好了
2、节流原理：预设一个执行周期，如果这个周期结束了都还没有触发函数，那就会执行一次函数；如果这个周期还没有结束就触发函数，那定时器将重置，开始新周期。
达到了想要的效果，既没有频繁的执行也没有延迟执行

附上js代码

   (function(){let num = document.getElementsByTagName('img').length;let img = document.getElementsByTagName("img");let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历lazyload(); //页面载入完毕加载可是区域内的图片function lazyload() { //监听页面滚动事件let seeHeight = document.documentElement.clientHeight; //可见区域高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度for (let i = n; i < num; i++) {// 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度if (img[i].offsetTop > seeHeight + scrollTop) {if (img[i].getAttribute("src") == "") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}//采用了节流函数function throttle(fun, delay, time) {let timeout,startTime = new Date();return function() {let context = this,args = arguments,curTime = new Date();clearTimeout(timeout);// 如果达到了规定的触发时间间隔，触发 handlerif (curTime - startTime >= time) {fun.apply(context, args);startTime = curTime;// 没达到触发间隔，重新设定定时器} else {timeout = setTimeout(fun, delay);}};
};
window.addEventListener('scroll',throttle(lazyload,500,1000));})()

前端页面图片加载优化相关推荐

前端页面图片加载失败如何处理
换成默认背景图片或隐藏方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时默认显示统一处理document.addEventListener("error", fun ...
前端页面图片加载失败显示默认图片
方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时默认显示统一处理 document.addEventListener("error", function (e) { ...
前端图片加载优化的各种技巧
目前的前端图片加载优化技术有很多,像懒加载/预加载,img上的srcset属性以及picture标签,新的图片编码格式以及Client Hints等. Client Hints 顾名思义,client ...
【Vue】—解决页面图片加载抖动的问题
[Vue]-解决页面图片加载抖动的问题问题如下解决办法 overflow:hidden; height:0; padding-bottom:*; // 其中*处填图片的高宽百分比=高/宽*100 ...
页面图片加载慢解决方案
一.问题: 页面图片加载很慢或访问图片路径,服务器返回图片慢二.解决方案方案一.压缩图片如果当前图片为png格式,你可以转化成jpg格式,图片体积会小很多,这样可能问题会直接解决方案二.使用b ...
图片加载优化，拒绝OOM
2019独角兽企业重金招聘Python工程师标准>>> 最近做了个资讯类的app项目,涉及到大量的图片加载,因公司项目框架已经集成了Glide用于加载图片,理所当然就直接用了Glid ...
html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化
页面加载闪白今天遇到一个问题,写了一个使用深色背景图的网页,发现访问/刷新时,会出现短暂的闪白现象. 之前使用浅色背景时没有发现过这个问题,搜索半天也没有找到特别直白有效的回答. 找到的几个答案,有 ...
图片列表页面的加载优化
起因源于文件拍照的列表页预览图,由于图片过大,后端设计时又没有考虑到略缩图的设计,原图片加载时会有加载到一半图片截断的显示效果,为避免这种显示问题,决定使用默认图片填充和js隐式加载图片的方式. 方 ...
网页图片加载优化方法总结
目录 1.压缩 2.直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉 3.使用base64编码代替图片 4.更好的图片格式 5.合并图片sprite(雪碧图) 6.使用css.sv ...

前端页面图片加载优化

前端页面图片加载优化相关推荐

最新文章

热门文章