我正在构建一个包含数百张图像的幻灯片,并希望构建一个漂亮的加载栏,因此我的想法是使用 JavaScript 预加载图像,然后初始化 UI 的其余部分。
预加载图像不是问题,但让浏览器在加载时更新状态才是问题。我已经尝试了一些方法,但浏览器只会在完成后重新绘制显示。
我什至尝试过脚本这个问题,但我得到了相同的结果。
这是我到目前为止所得到的(imgList 是一个文件名数组。我正在使用原型.)
var imageBuf = []
var loadCount = 0
$('loadStatus').update("0/"+imgList.length)
function init() {
imgList.each(function(element){
imageBuf[element] = new Image()
//imageBuf[element].onload = window.setTimeout("count()",0) // gives "not implemented" error in IE
imageBuf[element].onload = function(){count()}
imageBuf[element].src = "thumbs/"+element
})
}
function count() {
loadCount++
$('loadStatus').update(loadCount+"/"+imgList.length)
}
init()
尝试使用以下函数我对这个问题的回答:
function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) {
var itemIndex = 0;
(function() {
var remainingDataLength = (data.length - itemIndex);
var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength;
if(itemIndex < data.length) {
while(currentChunkSize--) {
workerCallback(data[itemIndex++]);
}
setTimeout(arguments.callee, timeout);
} else if(completionCallback) {
completionCallback();
}
})();
}
// here we are using the above function to take
// a short break every time we load an image
function init() {
incrementallyProcess(function(element) {
imageBuf[element] = new Image();
imageBuf[element].onload = function(){count()};
imageBuf[element].src = "thumbs/"+element;
}, imgList, 1, 250, function() {
alert("done loading");
});
}
您可能需要修改块大小参数以及超时长度,以使其按照您想要的方式运行。我不是 100% 确定这对你有用,但值得一试......
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)