前端大图预加载代码段

       上个周末顶了客服两天，发现我们的用户大多数对我们的网页上手比较慢，10个过来咨询的7个得问这个网页怎么使用，我回答的次数多了，也有感触的确应该做个导航给用户了。其实这个导航想法之前就有了，但是下定决心要做出来还是因为此次顶了客服两天所致的。做了整整三天，终于做出点模样了，现在就写一点自己的总结。

       在写代码之前，我还真想对自己说说一些个人感悟，100行的js代码，我愣是在中间绕了很多弯子，思路不清晰，头脑不灵活，JS的运用上面还是欠缺很多。在开发过程中，军军给了一点样式上的建议，其实很简单，就是一个虚框的效果，看上去更像导航一些，他也在谷歌调试器上给出了大体的样式，让我去兼容IE。结果，弄来弄去，我愣是没做出，还表示要放弃，军军让我找方法继续下去。很感谢军军的坚持，我最终花了一点时间做出这个效果来。坚持，遇到困难的时候，坚持下去，这一点是技能提升的重点。好了，以上是小小的两点感悟，接下来才是关于代码方面的总结。

      这次导航比较简单，主要是制作了14张大图片（200-500k），根据不同的大按钮，把对应的图片一张一张显示出来，点击图片可以切换到下一张，也可以点击上一步，切换到上一张。一开始，我的播放图片的方案是，需要一张加载一张，这样的播放的问题是往往切换到下一张的时候需要等1-5秒，不知情的还以为图片卡住了，体验很差。于是，另外一个方案出来了：把14个URL放在一个数组里面，在需要开始导航的时候，展示一个加载14张图片的进度条，进度条结束了，图片也结束了，以后使用图片都是瞬间的事情了，简化的代码如下：

var navImgUrls = ['a.png','b.png','c.png'];
    function preLoadImage(index,l.imgLength){
            console.log('预加载图片代码启动');
            var img  =  new Image();//生成一个img对象
            img.src = navImgUrls[index];//img对象的src属性指向当前被循环到的url
            img.onload = function(){//监听img的onload函数
                navImgObjects[index] = img;//img加载结束以后把这个img对象替代这个url字符型，这样你就不用再另起一个数组存放这个img对象了
                console.log('第'+index+'个img被预加载');
                $('#progress').css({width:(l=l+30)+'px'});//进度条事件
                index++;//index加1，表示要开始加载下一张图片
                if(index < imgLength){//如果没有超过数组长度的话，继续加载下一张图片
                    preLoadImage(index,l);
                }
            }
    }

navImgUrls 是一个存放每张图片URL的数组，当然啦，如果每张图片都不大的话这样做的优势不是很大，你像我这次需要展示的14张图片都是200-500k的，很需要这样的预加载代码。这段代码并不一定适合你，这只是一个总体思路，看你灵活运用了。这段代码，如果你放在调试器看你会发现，图片老老实实的按照队列预加载下来，但是一开始并不是这样的，一开始我直接在一个循环里面加载img,导致的后果是：图片不安装顺序加载，甚至有时候图片没有加载过来，在数组上对应的位置为空。所以监听onload事件，严格按照一个完成再继续下一个的思路，我们就能一个一个严格按照队列下过来。
      好了，这段大图预加载代码到此结束！