img: [ 'about.png', 'applyBtn.png', 'background2.png', 'bgImg.png', 'bird.cman.png', 'borad2.png',
'choujiang.png','entry.png','f_0.png','f_1.png','f_2.png','f_3.png',
'f_4.png','f_5.png','f_6.png','f_7.png','f_8.png','f_9.png',
'fxFBfont.png','ground.2.png','logo.png','pgBar.png','pgBg.png','pipe2.png',
'raffle.png','rank.png','rankBtn.png','ruleBtn.png','shareButton.png',
'shareImg.png','sureBtn.png','tap.png','titleImg.png','trymore.png'
],
count: 1,
go: 1,
init: function () {
var _this = this
$.get('dom.txt', function (response) {
$('#gameDiv').append(response)
_this.move()
})
this.count += this.img.length
this.go = this.count
this.loadImg()
},
loadImg: function () {
for (var i = 0i <this.img.lengthi++) {
var img = new Image()
var _this = this
img.onload = function () {
_this.move()
}
img.src = 'resource/assets/' + this.img[i]
}
return this
},
move: function () {
--this.go
var press = Math.round((this.count - this.go) / this.count * 100)
console.log('游戏加载进度', press)
// if(press === 100){
// start.init()
// }
}
}
jsload.init()
图片 和txt加载 可以参考下
ajax默认情况下是异步执行的(建议尽量异步),也就是说当发出ajax命令后,程序是不停顿的,如果这时候隐藏图片,那么就相当于没有显示了(浏览器可能来不及把图片显示出来就被你隐藏了)。所以,标准做法是在ajax的回调函数中进行图片的隐藏(建议用complete事件),比如:
var loading=document.getElementById("loading")loading.style.display="block" //尽量不要通过设为空白来显示图片,兼容性差
ajax({
//...其他参数略
success:...
fail:...
complete:function(){
loading.style.display="none" //在这里隐藏!
}
})
一般这种网站都是图片特别多而且质量很高导致加载慢。所以
我们基本监听图片加载进度就可以达到比较好的效果。
而图片我们可以采用预加载
(也就是浏览器可以缓存,到真的要用的时候会自动从缓存读取)
那么我们只要检测预加载图片的进度就可以了
代码基本如下:
var
imgs
=
["1.jpg","2.jpg"]
for(var
i=0i<imgs.lengthi++){
var
img
=
new
Image()
img.onload
=
function(){
//图片加载完毕
此时更新进度条
}
img.src
=
imgs[i]
}