之前我们讨论过 图片太大了! 导致分享和上传时,速度总是很慢的问题~
今天,我们接着讨论图片图片懒加载。这是前端性能优化中老生常谈的话题了。旨在提升页面初始化渲染性能和用户体验。
我们是不是会遇到这样的场景:
当访问一个图片展示比较多的网页时,页面加载速度很慢,尤其是其中的图片半天转不出个所以然来😓
很多时候,这是因为图片多导致的:大量的img图片导致页面渲染的堵塞。
这就出现两个问题:
因此,网页中图片的处理不可大意,尤其是图片很多的时候!
遥想当年,为了解决这个问题,自己抄起键盘一个劲儿的疯狂输出,最终勉强解决了问题。正在为自己的成就欣喜若狂的时候,发现“图片懒加载”的轮子早就有啦~😓
了不起翻了翻相关的插件!Echo.js
是最为简单明了,杠杠的好!这里分享给大家。
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库,压缩后不到1KB大小。
GitHub上翻了下源码,打开一看,共计135行!
Echo.js中,通过计算,当图片元素进入窗口可视区域的时候,它就会改变图像的 src 属性,从服务端加载所需的图片。
Sorry,画图不是我的强项。 但这不影响我们的理解。H1是视窗的高度,H2是img图片距离视窗的距离,可以自定义设置。当img到视窗顶部的距离等于(H1+H2)时,开始加载图片。
这样,图片只有在视窗滚到到临界值(H1+H2)的时候,才开始加载。有效提高网页首屏显示速度,性能和用户体验。
如果小伙伴们也碰到需要对页面图片加载优化的时候,不妨使用这个插件!真的很不错!具体详情,请查看下方链接。
GitHub地址: https://github.com/toddmotto/echo