Question

我正在为手机网络应用做一些客户端图像缩放，然后将其发送出去。即使对于较新的iphone，有时需要一段时间才能将图像缩小到那些大的8MP照片。

有没有办法使用javascript显示加载指示器，只有那么开始缩放图像？我不使用JQuery，所以我需要一个原生的解决方案。

下面我需要的一个例子..目前它没有显示加载指示器，直到它实际上通过请求发送图像...（这只是总共3秒加载的半秒时间）

showLoadingIndicator();
loadImage(file,function(canvas){
    heavyRotateStuff(canvas);
    var dataURL = canvas.toDataURL("image/jpeg");

    //Rotated the image here .... << INDICATOR DOESNT SHOW YET

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(ev){
        hideLoadingIndicator();// Were done, hide it, works!
    };
    //Some stuff for sending the image
    xhr.open('POST', 'uploadResized.php', true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var data = 'image=' + dataURL;
    xhr.send(data);
    //Indicator finally shows, though were almost done, just waiting for upload to be done..
}

Answer 1

调用显示指示符的函数后，使用setTimeout延迟调用处理图像：

showLoadingIndicator();

setTimeout(function() {
    loadImage(...);
}, 20);

由于JS是单线程的，它会在执行大量计算时阻塞线程，这意味着浏览器无法做其他事情，解释了指标未显示的原因。通过将呼叫延迟几毫秒，它将为浏览器提供一些空间来呼吸并设置指示器，然后进行计算。

在重javascript期间加载指标

1 个答案: