js加载图片进度条应该怎么写

JavaScript032

js加载图片进度条应该怎么写,第1张

var jsload = {

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加载 可以参考下

方法如下:

二进制格式:

使用不同文件格式,文件的大小会有所不同,如果同一个模型,导出二进制.fbx大小要比文本格式的.obj文件要小1~2倍。常见的GLTF格式可以是文本格式,也可以使二进制格式,为了更好的传输性能可以选择二进制格式,.glTF打包转化为.glb二进制文件。

减面和法线贴图:

一般3D美术导出模型的时候,会进行减面操作,并导出模型的法线贴图,比如你只是加载一个机械零件模型(非批量),你可以让3D美术进行减面然后导出法线贴图。

这样的话在不影响曲面显示质量前提下,减少模型三角形面数,一方面可以降低模型文件大小提高网络传输性能,另一方面可以提高threejs渲染模型的渲染性能。

加载进度条:

因为Web3D项目加载时间相对普通web页面时间比较长,如果用户一直等着,web页面没有什么反应,可能会关掉,这种情况下,可以在web页面放置一个进度条实时显示模型文件加载进度。

如何获得三维模型文件的加载进度可以查看threejs文档关于FileLoader类的介绍,至于web进度条,可以通过普通HTML和CSS代码去实现,然后和threejs加载进度数据进行绑定即可。

动态分批加载:

如果一个场景中,有多个网格模型模型,比如室内设计效果展示,里面有沙发、椅子、电视等三维模型,这时候把这些模型分别单独建立一个文件,threejs可以按照一定的顺序分别先后加载这些单独的网格模型文件,然后插入到场景中。

这样的话,用户可以以最快速度查看到场景中的部分模型,不用一直等待,没有什么反应,用户体验更好。

一般这种网站都是图片特别多而且质量很高导致加载慢。

所以

我们基本监听图片加载进度就可以达到比较好的效果。

而图片我们可以采用预加载

(也就是浏览器可以缓存,到真的要用的时候会自动从缓存读取)

那么我们只要检测预加载图片的进度就可以了

代码基本如下:

var

imgs

=

["1.jpg","2.jpg"]

for(var

i=0i<imgs.lengthi++){

var

img

=

new

Image()

img.onload

=

function(){

//图片加载完毕

此时更新进度条

}

img.src

=

imgs[i]

}