快许多图片的HTML加载 [英] Fast Loading of many images on html

问题描述

我编码，其中用户选择各种数据的脚本，然后我取了一堆图像（150）的服务器，然后我循环槽他们做出像一部电影。我想知道的是移动的低谷时，图像加载prevent滞后的最有效的方式。

I am coding a script in which the user selects a range of data, and then I fetch a bunch of images (over 150) from the server and then I loop trough them to make something like a movie. What I want to know is the most efficient way to load prevent lag when moving trough the images.

目前我使用的Ajax并将其存储在上JavaScript的Image对象的数组从服务器获取的图像。在HTML我有，我希望把图像的div标签。当我完成创建所有的图像对象（并设置其适当SRC）阵列中，我做到以下几点：

Currently I am fetching the images from the server using Ajax and store them in a array of Image objects on the JavaScript. In the HTML I have a div tag in which I wish to put the images. After I finished creating all the Image object (and setting their proper src) in the array, I do the following:

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

在此我只是做了最后一次电话，但不断变化的循环索引。我做的每400毫秒。环路的工作原理，但有时滞后和它用于图像上冻结时间越长，它被认为是。我想知道如果我能够从客户端改善这个了还是我只需要响应速度更快的服务器。

After this I just make that last call but changing the loop index. I do that every 400ms. The loop works, but sometimes it lags and it freezes on an image for longer that it is supposed to be. I want to know if I am able to improve this anymore from the client side or I just need a server that responds faster.

推荐答案

您可能想考虑 spriting 这是把所有的图像转换成一个大的图像。有了这个，你只需要加载一个大的图像，然后就重新定位为每一个场景。

you might wanna consider spriting which is putting all images into one big image. with this, you only need to load one big image, and then just reposition for every scene.

或者，你可能还需要pre-负荷实际使用之前的150图像。您可以使用JS数组来存储图片对象，然后遍历该数组，让您的图片。

or, you might also want to pre-load those 150 images, before actually using them. you can use JS array to store Image objects and then loop through that array to get your images.

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是单线程的，这意味着code被以线性方式，一前一后执行。任何来自该循环语句之后将等待，直到循环结束。如果这个循环需要很长......抓住一些咖啡。再加上，因为你是操纵DOM，你看不到，因为UI线程被阻塞的变化。

---

loops block the UI thread. JS is single-threaded, meaning code gets executed in a linear fashion, one after the other. anything that comes after that loop statement will wait until the loop finishes. if that loop takes long... grab some coffee. plus, since you are manipulating the DOM, you don't see the changes since the UI thread is blocked.

但有办法绕过这一点，其中之一是使用超时延迟和排队code以便以后执行，如果JS不旺。

but there are ways to bypass this, and one of them is using timeouts to delay and queue the code for later execution, when JS is not busy.

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);

这篇关于快许多图片的HTML加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！