028-86261949

当前位置:首页 > 技术交流 > 如何实现图片预加载:简单几步制作图片预加载插件

如何实现图片预加载:简单几步制作图片预加载插件

2019/08/21 17:50 分类: 技术交流 浏览:1

 

在前端用户体验为主的今天,前端web应用,性能非常重要,特别是对于很多图片特别多的应用,由于图片是比较大的,加载过程耗时比较长,这种情况下,如何快速加载图片,让用户有更好的用户体验,至关重要。那么,图片预加载技术就能解决此类问题。

 

首先,来介绍一下什么是预加载,简单的说,就是预知用于要发生什么行为,提交加载用户所需要的图片,当用户加载的时候,直接从缓存中获取图片。预加载的特点是可以提前加载用户所要浏览的图片,图片可以在用户浏览之前就加载到完成,用户的浏览体验就非常的好,可以实现无缝浏览。

 

那么,常见的图片预加载有哪些呢?首先,网站的loading页面,大家都知道网站的着陆页非常重要,如果用户打开网站的时候,着陆页很多图片加载不出来,卡顿,那么这个网站基本就流失了这个客户,所以,我们可在loading加载的过程中,偷偷的把图片都预先加载到本地,当loading消失以后,用户就可非常快速高效的浏览我们的网页了。

 

下来来,我们看一下如何实现预加载:

首先,我们准备一个网站的着陆页,有一张图片,和上一页下一页两个按钮,点击按钮的时候,可以左右切换浏览图片,实现效果如下:

 

 

 

实现代码如下:

 

然后,我们准备一个loading层,在加载图片的过程中,显示loading,图片加载完成以后,隐藏loading层,也就是隐藏的时候,所有图片都已经偷偷加载完成了,效果如下:

实现代码如下:

 

 

上下按钮,切换图片的功能:

 

 

我们发现,可以无缝隙的浏览图片,加载图片速度非常之快,基本可以无缝浏览器,因为在我们看到着陆页之前,图片已经被加载完成了,这大大的增强了用户体验。

 

但是,如下实现的话,不够通用,接下来,我们把它封装成插件把,首先,编写一个IIFE结构,写一个预加载的构造函数,和默认参数

 

然后,我们实现图片预加载上的原型方法preloadImg,实现预加载

接下来,由于图片预加载插件,不需要通过jQuery的实例DOM对象调用,所以无需挂在jQuery的原型上,我们可以把它挂在在jQuery构造函数$上,直接成为一个静态插件即可。

 

最后,我们就可以调用我们自己封装好的图片预加载插件了

 

 

好了,以上就是实现一个图片预加载插件的步骤和完成代码,掌握图片预加载技术,是作为一个合格的前端工程师的必备技能哦。

 

#标签:图片预加载