我正在编写一个脚本,用户可以选择数据范围,然后我从服务器获取一些图像(超过150张),然后循环遍历它们以制作类似于电影的东西。我想知道的是,在移动图像时最有效的加载方式如何避免卡顿。
目前,我使用Ajax从服务器获取图像,并将它们存储在JavaScript中的Image对象数组中。在HTML中,我希望将这些图像放入一个div标签中。在我完成创建数组中所有Image对象并设置其正确的src之后,我执行以下操作:
imgElem = document.createElement('img');
document.getElementById('loopLocation').appendChild(imgElem);
imgElem.src = images[0].src;
之后,我只需更改循环索引,并在每400毫秒执行一次该最终调用。该循环可以工作,但有时会出现滞后情况,并且会在一个图像上冻结的时间比预期的要长。我想知道是否能够从客户端进一步改善此问题,或者我是否需要一个响应更快的服务器。