0

我只是在玩一个为图像设计的简单的多重上传表单。我目前正在处理的是一个多重上传表单，它在用户提交表单之前发送 AJAX 请求。PHP 脚本只是将文件保存到服务器并调整图像大小。

发送请求时，会创建一个跨度，其中包含一个图像元素，其 id 对应于列表中的图像编号，并在源中放置一个 ajax 加载 gif。

当响应返回时，我通过它的 id 获取元素，并将源替换为保存在服务器上的图像。

到目前为止一切正常，只是速度非常慢。

完整代码在这里：pastebin

我几乎可以肯定问题正在发生，

        xmlHTTP.onreadystatechange = function(){
            if( xmlHTTP.readyState == 4 && xmlHTTP.status == 200){
                var jsonResponse = JSON.parse(xmlHTTP.responseText);
                
                var actualNumber = jsonResponse.imageNumber-1;
                
                console.log("Image #" + jsonResponse.imageNumber + " Took " + jsonResponse.scriptTime + " to process.");
                console.time('profileGetElementByIdforImage'+actualNumber);
                document.getElementById("preview"+actualNumber).setAttribute("src", jsonResponse.fullPath);
                console.timeEnd('profileGetElementByIdforImage'+actualNumber);
            }
            
        };

奇怪的是，如果我把它从本地机器上取下来并上传到我的服务器，它需要更长的时间，尽管 PHP 脚本时间要短得多。

我会得到这样的东西：

Image #1 处理时间为 6.3307409286499 秒。

profileGetElementByIdforImage0：3ms

即使当我单击检查元素时实际 html 中的源代码发生了变化，ajax 加载 gif 仍然保留了一段时间......

我认为这可能与浏览器必须调整图像有关，所以我在 php 脚本中添加了“缩略图”功能。但是客户端花费的时间与我使用全尺寸图像时一样长。

所以现在我想知道，这与来自服务器的请求有什么关系吗？或者这是一个 DOM 问题？

任何见解将不胜感激。

4

1 回答 1

0

PHP 图像解析，尤其是调整大小需要相当长的时间，尤其是在图像很大的情况下。因此，如果 6 秒是发送 POST 请求所花费的时间，请调整大小并返回相当不错的图像。

为了让事情变得更快一点，我建议在 aSync 进程中抛出 POST 请求，一种天真的方法是：

window.setTimeout(function(){
  //POST Request
},1);

然后，一旦图像返回，只需将其放在您想要的任何位置，这将使用户体验更好，并且不会阻止浏览器执行其他操作，因此它看起来会非常快。

于 2013-03-21T00:22:21.067 回答