预加载下一张图片

首页说明本人是一个菜鸟，所以代码也很菜，有写的不对的，错的，请多多指教。

此方法只能按顺序预加载图片，当页面进来时候开始加载第二张图片，然后以此类推..这样就不用一次把所有的图片加载完，或者等待下一张图片的加载。

<img src="" border="1" align="top" width="400" height="300" id="showImg" /> <strong style="color:#0000FF"><- Click</strong>    

var readyImg = function(){
　　var self = this;
　　this.imgList 　　　　=['http://zys365.com/demo/images/5.jpg','http://zys365.com/demo/images/42766298.jpg','http://zys365.com/demo/images/42766101.jpg','http://zys365.com/demo/images/42813139.jpg','http://zys365.com/demo/images/42766145.jpg','http://zys365.com/demo/images/42766316.jpg','http://zys365.com/demo/images/42813100.jpg','http://zys365.com/demo/images/42813171.jpg'];
　　var imgId = 0;
　　this.url = null;

　　this.loadImg = function(){
　　var img = new Image();
　　$('#log').text("下一副的ID是" + imgId + ";图片的地址是" + self.imgList[imgId])
　　$('#showImg').attr('src',self.imgList[imgId])
　　$('#text').text('正在加载中....')
　　imgId = imgId >= self.imgList.length-1 ? 0 : imgId+1;
　　img.src = self.imgList[imgId];
　　img.onload = function(){
　　img.onload = null;
　　img = null;
　　$('#text').text('加载玩了')
　　　　$('#reday').text('下一张图片加载完成');
　　};
　　self.url = img.src;
　　};
　　this.setImg = function(){
　　　　self.loadImg()
　　　　$('#showImg').click(function(){
　　　　　　$('#showImg').attr('src',self.url)
　　　　　　　　$('#reday').text('下一张图片正在加载...');
　　　　　　　　self.loadImg();
　　　　})
　　　}
}
var host = new readyImg;
host.setImg()