预加载（异步加载）图片 new Image

html里的img写法

src先空着，然后给img标签添加一个data-src的属性，在加载的时候再给src赋值

例：

<img src="" alt="" data-src="1.jpg">

css禁止保存图片

img {
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

如果有需要被保存的图片则单独设置css属性

pointer-events: auto;
user-select: auto;

调用

其中xxx是要显示的页面，加载的图片就是这个页面里需要的图片（也可以自己添加其他图片）

giveValue('xxx');

加载的js

这部分复制粘贴过去就好，
需要自己改的是：

• $progress的ClassName（改变进度的数字）
• loading页的ClassName（显示和隐藏的时候使用）
• 初始化进度条的宽（高）度（现在有数字的进度显示，图片的进度条每个人写的可能都不一样，就没写）
• 另外添加的图片（就是giveValue函数中if里面arr.push里的图片路径）
• 加载过程中的进度条（现在有数字的进度显示，图片的进度条需要自己写，值都是一样的）

let arr = []; // 放置图片路径的数组
let len = 0; // 图片路径的数组的数量
let count = 0; // 加载图片
let $progress = $('.percent'); // loading页面进度百分比显示数字的标签

// 给src赋值，改变arr
function giveValue(div) {
	// loading页显示
	$('.page_loading').show();
	// loading页初始化(进度条和百分比数字清零)
	$progress.text("0%");

	// 将要显示的页面里面的img的src赋值
	$('.' + div + ' img').each(function() {
		let $cur = $(this);
		// 获取存放图片路径
		let imgs = $cur.attr('data-src');
		arr.push(imgs);
		// 给图片路径赋值
		$cur.attr('src', $cur.attr('data-src'));
	})
	
	//当要显示xxx页面时，需要另外加载的图片(比如没写在img里面，写的background或者动态加载的)
	if (div == 'xxx') { 
		arr.push('1.jpg', 
			'2.jpg',
			'3.jpg'
		);
	} 

	// 获取数组长度
	len = arr.length;
	loadImg(arr, len, div);
	// console.log(arr, 'len : ' + len);
}

// 加载图片方法
function loadImg(arr, len, div) {
	$.each(arr, function(i, src) {
		let imgObj = new Image();
		// 加载过程
		$(imgObj).on('load error', function() {
			// 动态改变loading百分比数字和进度条(进度条每个人写的不一样，所以在这就没写)
			$progress.text((Math.round((count + 1) / len * 100) + "%"));
			// console.log((count + 1) / len * 100);
			
			// 加载完成,隐藏loading页,显示加载完的页
			if (count >= len - 1) {
				$('.' + div).show();
				$('.page_loading').hide();
				
				// 清空赋值,方便下次加载别的页面
				arr.splice(0, arr.length);
				len = 0;
				count = 0;
			}
			count++
		});
		imgObj.src = src;
	})
}