基于jq实现图片预加载功能

最新推荐文章于 2022-04-06 11:17:37 发布

Lewalker59

最新推荐文章于 2022-04-06 11:17:37 发布

阅读量586

点赞数

分类专栏：前端学习笔记文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_43188432/article/details/105212341

版权

本文介绍了预加载作为Web性能优化的一种技术，旨在提升用户体验。通过jQuery实现预加载功能，详细阐述了预加载的原理及其实现步骤，包括利用jQuery的extend函数设置配置对象，监听load和error事件进行图片资源的加载，并展示了相关代码示例。

摘要由CSDN通过智能技术生成

一、什么是预加载？

预加载是一种web性能优化技术，在页面加载之前，对部分资源进行提前加载，以提供给用户更好的体验，提高用户在浏览资源过程的流畅感。

二、预加载的实现

本次实验依赖jq实现

首先看一下预加载实现的效果
提前对页面中未显示的图片资源进行加载，当用户在浏览到相应的图片资源时直接从浏览器缓存中渲染在页面上。
实验效果
首先，我们使用立即执行函数，以闭包的方式，实现局部变量，避免内部变量与外部发生冲突，在内部声明Preload函数。
这里使用了Jq的extend函数深拷贝传递的对象给局部变量中

function Preload(imgs, options){
   
	this.imgs = imgs;
	this.opts = $.extend({
   }, Preload.DEFAULTS, options);
	this._unordered();
}

定义默认的对象，each表示每加载完成一次图片资源，就执行一次each中的函数；而all则当全部图片资源加载完成后执行的函数

Preload.DEFAULTS = {
   
	each: null,
	all: null
}

在Preload的原型对象中创建_unordered函数，用来加载图片资源，这里需要注意，监听的load和error事件是等到遍历完成后才会依次执行相应的回调函数

Preload.prototype._unordered = function(){
   
	var imgs = this.imgs,
		opts = this.opts,
		count = 0,
		len = imgs.length;
	//预先对图片进行加载存放在浏览器中，当页面需要显示该图片时直接从缓存中获取显示在dom上
	//过程：同步遍历完成全部imgs中的元素并给src赋值->异步执行加载图片
	$.each(imgs, function(i, src){
   
		if(