图片预加载

先确定总体思路，在图片还没有加载完成的时候，有一个loading图片遮挡。外部容器wrapper取相对定位，loading以绝对定位。

当图片加载完毕，给loading设置display:none;从而隐藏。在本文中，loading的图片采用iconfont的字体图片，不懂的同学自己去查一下。

HTML如下，我们设置3个wrapper容器，以下是其中一个的示例代码：

<div class="wrapper"><img src="someimg.jpg" alt="img"><div class="loading"><i class="iconfont Rotation"></i></div></div>

CSS采用less来写，我们采用了CSS3的animation属性让它旋转。

首先为元素设置CSS属性animation

animation: rotation 3s linear infinite;

它的四个参数的含义  rotation--关键帧的名字；3s--完成动画所需要的时间；linear--动画的变化速度采用线性变化；infinite--动画循环次数无限次。

具体代码如下：

.wrapper{width: 860px;height: 400px;overflow: hidden;position: relative;img{width: 100%;}.loading{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: #fff;text-align: center;i{font-size: 40px;line-height: 400px;}@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}@keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}.Rotation{transform: rotate(360deg);-webkit-transform: rotate(360deg);animation: rotation 3s linear infinite;-moz-animation: rotation 3s linear infinite;-webkit-animation: rotation 3s linear infinite;-o-animation: rotation 3s linear infinite;}}}

对于javascript代码，我们采用Alex Wang老师的教程所编写的插件，它依赖于jquery，其实现的思路是：new一个Image对象，为新的其设置src属性，此时就开始了对图片图片的加载。

为Image对象添加load和error事件，在load和error事件中隐藏loading图片。

源代码如下：

//图片预加载(function($){function PreLoad(imgs,options){this.imgs = (typeof imgs === 'string')?[imgs]:imgsthis.opts = $.extend({},PreLoad.DEFAULTS,options)if (this.opts.order === 'ordered') {this._ordered()}else{this._unoredered()}}PreLoad.DEFAULTS = {order:'unordered', //无需预加载each:null,//每一张图片加载完毕后执行all:null //所有图片加载完毕后执行}PreLoad.prototype._ordered = function(){ //有序加载var opts = this.opts,imgs = this.imgs,len = imgs.length,count = 0load()function load(){var imgObj = new Image()$(imgObj).on('load error',function(){opts.each && opts.each(count)if (count >= len) {//所有图片已经加载完毕opts.all && apts.all()}else{load()}count++;});imgObj.src=imgs[count]}}PreLoad.prototype._unoredered = function(){ //无序加载var imgs = this.imgs,opts = this.opts,count = 0,len = imgs.length$.each(imgs,function(i,src){if (typeof src != 'string') {return}var imgObj = new Image()$(imgObj).on('load error',function(){opts.each && opts.each(count)if (count >= len - 1) {opts.all && opts.all()}count++})imgObj.src = src})}//jquery两种加载方式// $.fn.extend -> $('#img').preload()// $.extend -> $.preload()$.extend({preload:function(imgs,opts){new PreLoad(imgs,opts)}})})(jQuery);

最后，在HTML页面中，将插件引入，并调用插件的函数，代码如下：

<script src="./js/jquery.js"></script><script src="./js/preload.js"></script><!-- 图片预加载插件 --><script>$(document).ready(function($) {var imgs = ['./style/img/code.jpg','./style/img/legalHigh.jpg','./style/img/nodejs.png',]var len = imgs.length,index = 0var tagsOfImgs = $('.wrapper img')setTimeout(function(){//该延迟为了凸显效果$.preload(imgs,{each:function(count){$(tagsOfImgs[count]).attr('src',imgs[count]);var parent = $(tagsOfImgs[count]).parents('.wrapper')var loading = parent.find('.loading')console.log(loading)loading.addClass('hide')}})},1000);});</script>