前端性能优化--图片懒加载(lazyload image)
话说前头:
上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视频,flash等)也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求。
懒加载介绍:
通俗介绍:懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求。通俗的说就是你不要就不给你,怎么地。举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加载速度。因此用懒加载能当滚动到可视区域时才加载当前的图片。
原理:图片的加载是由src的值引起,当对src赋值时浏览器就会请求图片资源,基于这个,可以利用html5属性data-XXX来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src,酱就能实现图片的按需加载,也就是懒加载了。
优点:提高前端性能,图片在需要的时候才加载,减轻服务的负担,提高页面的加载速度,能够减少带宽。
懒加载实现方式:
1.使用jquery-lazyload.js,jQuery的插件用于懒加载使用,需要依赖jQuery。
jquery-lazyload.js演示
2.使用echo.js:专门用于实现懒加载。
echo.js演示
-- jquery-lazyload.js 实现方式:
1.引入:在HTML中引入jQuery和jQuery-lazyload,如:
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
2.图片中不使用src属性,因为使用src属性后就会默认发送请求请求图片,使用data-original代替如:
<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">
3.添加jQuery代码:
<script type="text/javascript"> $(function() { $("img.lazy").lazyload(); }) </script>
-- jquery-lazyload.js的参数:
1.threshold :设置Threshold参数来实现滚到距离其xx px时就加载。如:
$(function() { $("img.lazy").lazyload({ threshold :100 }); })
2.placeholder :为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏,比如放一些等待加载的图片来优化用户体验效果。
$(function() { $("img.lazy").lazyload({ placeholder: "images/loading.gif" }); })
3.event :触发定义的事件时,图片才开始加载(此处click代表点击图片才开始加载,还有mouseover,sporty,foobar(…))
$(function(){ $("img.lazy").lazyload({ event : "click" }); })
4.effects :图片显示时的效果,默认是show。
$(function(){ $("img.lazy").lazyload({ effects:"fadeIn" }); })
5.container :值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
$(function(){ $("img.lazy").lazyload({ container: $("#container") }); })
6.failure_limit :一般用于当页面中图片不连续时使用,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内,插件默认情况下在找到第一张不在可见区域的图片时停止循环。如:
$(function(){ $("img.lazy").lazyload({ failure_limit : 20 }); })
这里设为20表示插件找到 20 个不在可见区域的图片时才停止搜索。
7.skip_invisible :为了提升性能,插件默认忽略隐藏的图片;如果想要加载隐藏图片.设置skip_invisible为false;
$(function(){ $("img.lazy").lazyload({ skip_invisible : false }); })
-- echojs实现方式:
引入:在HTML中引入jQuery和jQuery-lazyload,如:
<script type="text/javascript" src="js/echo.min.js"></script>
图片中的src使用data-echo代替如:
<img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300">
添加js代码:
echo.init({ //离可视区域多少像素的图片可以被加载 offset: 500, //图片延时多少毫秒加载 throttle: 1000 });
-- echo只有两个可选参数:
- offset:离可视区域多少像素的图片可以被加载
- throttle:图片延时多少毫秒加载
最后说几句:
- 上述的懒加载实现方式都是人家实现好的,毕竟人家已经做好就不去重复造轮子,直接用人家会比较放心,因为大家都在用。
- jquery-lazyload插件的功能比较多,echojs虽然功能少但也够用,而且体积小,所以根据需求对两者取舍。
- 别人做好但也要去了解人家的如何去做,原理有了,我自己也尝试去做,写得还不是很好。这两个方式对于一些页面图片懒加载已经够用,但是对于轮播图的加载还是不够理想。
- 遇到的一些问题:
1.在滚动轮播图片中,首次不能加载还没有滚出来的图片。
2.想实现点击下一张轮播图才去加载那张图片。
以上所说的这些还需要继续研究研究,正在寻求一些好的方法。
转载于:https://www.cnblogs.com/TigerZhang-home/p/7239697.html
前端性能优化--图片懒加载(lazyload image)相关推荐
- 前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量 在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
- 前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
- 图片懒加载 lazyload
目录 了解 代码 效果 了解 图片懒加载是一种网页性能优化的方法,能够极大的提升用户的体验效果,现代一张图片都有可能是几兆的问题,加入100张图片你进入页面难道就直接全部请求,这得要多卡,所以使用图片 ...
- ajax预加载html seo,前端性能优化 — JS预加载和懒加载
JS预加载 需求:有时我们需要实现例如快速快速切换页面.图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多. 核心: ...
- 图片懒加载——lazyload
vue-lazyload - npm 上面链接为官方指导 1.安装vue2所兼容的版本 npm i vue-lazyload 2.在main.js中引入插件和图片 // 引入懒加载插件,引入图片 im ...
- 图片懒加载(lazyload)的几种方式
背景 当页面中有很多图片时,全部加载需要很多时间,而且会消耗很多渲染资源,为了解决这个问题,加强用户体验,我们先将看得到的区域中的图片加载,也就是 可视化区域 加载,剩余部分等之后再加载. 原理 ...
- 前端性能优化之预加载
网络连接的快慢,是前端性能的瓶颈之一,在这里我们能做些什么呢,下面介绍几个通过浏览器特性来很容易提高资源加载速度的方法: DNS prefetching DNS解析的速度可用通过下面的标签来进行预解析 ...
- 从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载
点击上方 前端瓶子君,关注公众号 回复算法,加入前端编程面试算法每日一题群 全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步
- [js] 图片懒加载
懒加载使用场景 在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
- vue 图片拖动加载 类似于地图_前端性能优化之图片懒加载(附vue自定义指令)...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
最新文章
- Xpath语法-爬虫(一)
- 智慧园区-楼宇建模技巧之【建楼篇】
- Unity3d 新建xml 读取xml
- 2.导数——线性代数回顾、曲线概念_1
- 软件工程--瀑布模型
- android的ant脚本build.xml自动生成模板
- Leetcode 刷题笔记(二十六) ——动态规划篇之经典问题:打家劫舍
- PHP之Trait详解
- 【转载】robocopy的用法
- 百度排名规则及算法(百度内部资料)
- zedgraph显示最小刻度_ZedGraph显示多条实时曲线
- 南方cass提取坐标生成表格_如何在CAD中或者CASS中将坐标导入到EXCEL表格(个人笔记)...
- 全面了解三极管——三极管用作开关管2
- 炉石兄弟 修复图腾师问题 by大神beebee102, 还有阴燃电鳗
- 利用QQ游戏破解QQ密码
- C#MySql.Data报错Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
- Could not enlist in transaction on entering meta-aware object!”
- 开篮球馆需要什么_开一个篮球馆怎么样?开篮球馆需要办理什么手续?
- hashmap头插法和尾插法区别
- C/C++结构体struct详解
热门文章
- roc-auc_AUC-ROC技术的局限性
- pandasSeries模块
- php搜索功能代码实列,php记录搜索引擎关键词的代码示例
- java对象的序列化和反序列化_Java对对象的序列化和反序列化详解
- java编程中的点_java编程中所遇到的知识点(持续更新)
- 2019一注结构成绩_2019年福建地区计算机考研汇总分析
- ora-28500 ora-02063 mysql_ORA-01017/ORA-02063 DbLink建立错误问题分析及解决
- mysql lamp 配置命令总结
- GNU make manual 翻译(四十六)
- PLSQL 连接不上64位ORACLE数据库解决办法