您可能想要考虑将所有图像整合为一张大图像的拼版。这样,您只需要加载一个大图像,然后为每个场景重新定位即可。
或者,您可能还需要在实际使用之前预加载这150张图像。您可以使用JS数组存储Image对象,然后遍历该数组以获取图片。
var images = [];var expectLoaded = 150;for(var i = 0; i<expectLoaded;i++){ (function(i){ //new image object var img = new Image(); //onload hander img.onload = function(){ //after load, push it into the array images.push[img]; //and check if the all has loaded if(images.length === expectLoaded){ //preload done } } //start loading this image img.src = //path to image[i]; },(i));}循环会阻塞UI线程。JS是单线程的,这意味着代码以线性方式执行,一个接一个地执行。该循环语句之后的所有内容都将等待,直到循环完成。如果该循环需要很长时间…请喝杯咖啡。另外,由于您正在处理DOM,因此由于UI线程被阻止,您看不到更改。
但是有很多方法可以绕开它,其中一种方法是使用超时来延迟和排队代码,以便在JS不忙时执行。
function animate(frameNo){ //animate frame[frameNo]; if(frameNo < total_frames){ //make the UI breate in between frames setTimeout(function(){ //so that changes reflect on the screen animate(++frameNo); //then animate next frame },200);}}//startanimate(0);


