图片预加载

HTML5学堂：2014年年初的时候，曾经在自己的博客“独行冰海”里写过关于图片预加载和懒加载的博文，当时的文章当中没有写什么关于预载的代码范例，当前打算把预载和懒载分开，讲解的再详细一些。本文主要讲解了图片预载是什么，为何使用预加载，使用预加载的好处以及具体的代码实现。

图片预加载是什么

让浏览区先显示其他的图片(一般使用LOGO)给浏览者看，等图片加载完了之后，再将图片显示。

还有一种更为常见的预载，就是我们随处可见的loading条~~~在我们等待着loading条走完时，内容已经开始加载了~！

为何要用图片预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染、可能因为图片很大，浏览器显示出它会用很长的时间，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。

图片预加载的好处，在于有良好的用户体验。图片预加载主要针对非icon类的图片。

图片预加载的基本原理(即实现方法)

实现预载的方法可以用CSS(background)、JS(Image)。最常用的是JS方法中的new Image();

方法1 使用CSS中的background

设置如下样式： #preload_1 { background: url(要加载图片的名称.png) no-repeat -9999px -9999px; }

之后，将选择器应用到HTML元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在WEB页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效，不需要任何JavaScript。

使用该方法加载图片会存在一定的问题：由于CSS是同页面的其他内容一起加载，这也就意味着增加了页面的整体加载时间。

此处，可以使用JS配合，动态的改变style.background倒是可以让图片加载延迟一些(在加载页面之后)执行。

方法2 JavaScript中的new Image()方法【推荐】

基本步骤：

1 使用new Image()动态的创建img

2 设置其src为要加载的图片，来实现预载。

3 使用onload方法回调预载完成事件(也就是当预载完成之后，执行想要的操作)。

只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。

另外，当Image下载完图片后，会得到宽和高，因此也可以在预载前得到图片的大小(可以用计时器轮循宽高变化)。

图片预载的代码实现

var loadImg = []; // 创建一个数组，用于存储所有要预加载的图片路径

// 通过push方法，将

loadImg.push('h5course(1).jpg');

loadImg.push('h5course(2).jpg');

loadImg.push('h5course(3).jpg');

loadImg.push('h5course(4).jpg');

loadImg.push('h5course(5).jpg');

loadImg.push('h5course(6).jpg');

loadImg.push('h5course(7).jpg');

loadImg.push('h5course(8).jpg');

var imgsNum = loadImg.length;

var nowNum = 0;

var nowPercentage = 0; // 用于显示加载每一张图片之后，能够给出百分比

// 通过for循环，针对loadImg整个数组进行遍历

for (var i = 0; i < imgsNum; i++) {

// 每一次i变化之后，都需要执行这样的内容 - 创建一个img对象，将img对象的src设置为相应的图片地址

var newImg = new Image();

newImg.src = loadImg[i];

// 每一张图片加载完成之后，都可以执行相应的功能，比如我们在制作loading条时，希望每加载一张图片之后就能够将当前进度显示出来，就可以用这个方法

newImg.onload = (function() {

// 一张图片加载完毕之后执行的功能 - 通常是为了控制进度条

nowNum++;

if (nowNum == imgsNum) {

// 加载完成一张图片之后，我们还可以判断是否完成了所有图片的加载，如果完成再执行相应的内容

};

nowPercentage = nowNum / imgsNum * 100;

console.log(nowPercentage + '%');

})();

};

关于要说的，利利都已经备注在代码当中了~~~

Tips：注意一点，如果是本地测试，请启动服务器(在wamp当中运行)。

对于wamp不是很了解的，在此简要介绍一下，wamp是服务器集成环境，想要安装以及配置的，可以点击此处——>wamp的配置与安装。如果您使用微信公众号，想要查看wamp的信息，可以直接发送“wamp”到“HTML5学堂”的微信。

HTML5小编-利利 耗时5h

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注