图片预加载

Author Avatar
李武林 8月 22, 2017
  • 在其它设备中阅读本文章

图片预加载

当前各种网站图片的大量使用很大程度上丰富了网站内容，方便了人们阅读，但与之而来的大量图片的使用，在网站加载时增加了负担，如果不能很好的及时有效的加载这些图片，会造成图片展示不全或不展示等一系列用户体验不好的问题。从而会降低用户对整体网站的体验度。而为了解决这种不好的体验往往就采用图片预加载的这种解决方式。
“预加载”顾名思义就是事先加载，它预判用户可能的操作，事先加载好可能浏览的图片，从而在用户正真访问时从缓存中快速访问，达到快速流畅的效果。而预加载参考别人的说法又分为两类，有序加载和无序加载。

无序加载

无序加载就是加载时不考虑图片的加载顺序往往是一次性的加载可能访问的图片，适用的场景比如图片册等。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Preload.prototype._unordered = function() {
	debugger;
	var count = 0,
		imgs = this.imgs,
		options = this.options;
	$.each(imgs, function(i, src) {
		if (typeof src != "string") {
			return;
		}
		var imgObj = new Image();
		$(imgObj).on("load error", function() {
			options.each && options.each(count);
			if (count >= imgs.length - 1) { 
				options.all && options.all();
			}
			count++
		});
		imgObj.src = src;
	});
};

有序加载

有序加载与无序加载对应的是加载时需要考虑图片的加载顺序，必须在前一张加载完成之后再加载下一张，比如漫画网站，在浏览漫画时，漫画的每一页都是有顺序的，必须要按照页数来顺序加载。代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Preload.prototype._ordered = function() {
	debugger;
	if (typeof src != "string") {
		return;
	}
	var count = 0,
		imgs = this.imgs,
		options = this.options;
	function load() {
		var imgObj = new Image();
		$(imgObj).on("load error", function() {
			options.each && options.each();
			if (count >= imgs.length - 1) {
				options.all && options.all();
			} else {
				load();
			}
		});
		imgObj.src = imgs[count];
		count++;
	}
};

###以上就是图片预加载的两种简易方法，图片预加载的核心思想就是“未雨绸缪”，在还未浏览到可能浏览的图片时，利用当前浏览的空闲时间去加载后面的图片，在加载的时候可能会用AJAX的异步请求的技术，但只要搞清楚它的原理，只是修改它的加载方式就很easy啦。
下面附上完整预加载插件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
(function($) {
	debugger;
	function Preload(imgs, options) {
		this.imgs = (typeof imgs === "string") ? [imgs] : imgs;
		this.options = $.extend({}, Preload.DEFAULTS, options)
		if (this.options.order === "unordered") {
			this._unordered();
		} else {
			this._ordered();
		}
	}
	Preload.DEFAULTS = {
		order: "unordered",
		each: null, //每加载一个图片完毕执行
		all: null //所有图片加载完毕后执行
	};
	Preload.prototype._ordered = function() {
		debugger;
		if (typeof src != "string") {
			return;
		}
		var count = 0,
			imgs = this.imgs,
			options = this.options;
		function load() {
			var imgObj = new Image();
			$(imgObj).on("load error", function() { 
				options.each && options.each();
				if (count >= imgs.length - 1) { //判断是否加载完毕
					options.all && options.all();
				} else {
					load(); //加载下一张
				}
			});
			imgObj.src = imgs[count];
			count++;
		}
	};
	Preload.prototype._unordered = function() {
		debugger;
		var count = 0,
			imgs = this.imgs,
			options = this.options;
		$.each(imgs, function(i, src) {
			if (typeof src != "string") {
				return;
			}
			var imgObj = new Image();
			$(imgObj).on("load error", function() {
				options.each && options.each(count);
				if (count >= imgs.length - 1) { //判断是否加载完毕
					options.all && options.all();
				}
				count++
			});
			imgObj.src = src;
		});
	};
	$.extend({
		preload: function(imgs, opts) {
			new Preload(imgs, opts);
		}
	})
})(jQuery);