在html上快速加载许多图像

Fast Loading of many images on html

本文关键字：加载 许多 图像 html      更新时间：2023-09-26

我正在编写一个脚本，用户在其中选择一系列数据，然后我从服务器中获取一堆图像（超过150张），然后循环使用它们来制作类似电影的东西。我想知道的是，在图像中移动时，加载防止滞后的最有效方法。

目前，我正在使用Ajax从服务器获取图像，并将它们存储在JavaScript上的一组Image对象中。在HTML中，我有一个div标记，我希望在其中放置图像。在我完成了在数组中创建所有Image对象（并设置了正确的src）之后，我执行以下操作：

imgElem = document.createElement('img');
document.getElementById('loopLocation').appendChild(imgElem);
imgElem.src = images[0].src;

在这之后，我只进行最后一次调用，但更改了循环索引。我每400毫秒做一次。循环是有效的，但有时它会滞后，在图像上冻结的时间比预期的要长。我想知道我是否能够从客户端改进这一点，或者我只需要一个响应更快的服务器。

您可能需要考虑spriting，它将所有图像放在一个大图像中。这样，您只需要加载一个大图像，然后为每个场景重新定位即可。

或者，在实际使用之前，您可能还想预加载这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);                  
    }
}
//start
animate(0);

我同意Joseph的第二点。这里有一个很好的链接，可以在开始循环之前完成图像预加载：http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml

相关文章：