下载文件后如何隐藏动画gif? [英] How to hide an animated gif after the file has been downloaded ?

问题描述

在执行某些服务器端Java代码并且客户端从Web服务器获取HTTP响应而不使用Ajax之后，是否可以使动画gif图像消失?

Is there a way to make an animated gif image disappear after some server side Java code is executed and the client gets an HTTP Response from the webserver without using Ajax?

我正在使用以下Struts2提交按钮:

I´m using the following Struts2 submit button:

<s:submit value="show Data" onclick="myJsFunction()" />

显示动画gif图像的方法:

Method to appear the animated gif image:

function myJsFunction(){  
    $("#containerWithGifImage").fadeIn("fast");  
} 

使动画gif图像消失的方法(但我不知道如何在没有Ajax的情况下调用它):

Method to disappear the animated gif image (but I have no idea, how I can call it without Ajax):

 function myJsFunction2(){  
     $("#containerWithGifImage").fadeOut("fast");  
 }  

现在gif出现了，但是在执行Web服务器上的Java代码之后它并没有消失.

Now the gif appears but it is not disappeared after the java code on the webserver was executed.

推荐答案

您的两个问题(这和另一个问题 )是 XY问题的示例.

Both your questions (this and the other one) are examples of the XY problem.

在寻找特定的技术，技巧或骇客之前，请先明确定义您的目标:

Before looking for specific technologies, techniques or hacks, start defining clearly your goal:

1. 下载文件而不移动到其他页面；
2. 同时显示一个指示器(进度条，动画gif，叠加层等)；
3. 下载文件后，隐藏指示器.

1. Download a file without moving to other pages;
2. Meanwhile, showing an indicator (progress bar, animated gif, overlay, etc...);
3. When the file has been downloaded, hide the indicator.

解决方案

将触发器绑定到javascript函数如此处所述:

<a href="javascript:myJsFunction();"> download </a>

在Javascript函数中:显示指示器，启动计时器以检查下载是否结束(然后隐藏指示器)，然后下载文件:

In your Javascript function: show the indicator, start a timer to check if the download is over (and then hide the indicator), and download the file:

 function myJsFunction(){

    $("#containerWithGifImage").fadeIn("fast"); // Show the indicator

    setInterval(function(){
        $.ajax({
                url : "/isDownloadFinished.action", type : "GET",
            success : function(data,textStatus,jqXHR) {
                $("#containerWithGifImage").fadeOut("fast"); // Hide the indicator
            },error : function(jqXHR, textStatus, errorThrown) {
                console.log("Download is still in progress, do nothing..."); 
            }
        }); 
    }, 1000); // Check every second if download has finished

    window.location='/download.action'; // Start the download
}

Download.action 必须在会话中添加一个指示下载已开始的属性，并在下载结束后对其进行更新.
由于使用stream结果是将响应的控制权委托给浏览器(因此，在完成后无法运行代码)，因此可以直接写入响应，然后返回NONE，如此处所述:

Download.action must put in the session an attribute indicating the download has started, updating it when it's over.
Since with the stream result you're consigning the control of the response to the browser (and hence you can't run code when it has finished), you can write directly to the response and then return NONE, as described here:

public class Download extends ActionSupport implements SessionAware, ServletResponseAware {

    @Setter private Map session;
    @Setter private HttpServletResponse response;

    public String execute(){
        ServletOutputStream os = null;
        try {
            session.put("DOWNLOAD_STATUS","active");
            response.setContentType("myContentType"); 
            response.addHeader("Content-Disposition", "attachment; filename=\"foo.bar\"");
            os = response.getOutputStream();
            IOUtils.copy(getMyFileInputStreamSomeHow(), os);
        } finally {
            IOUtils.closeQuietly(os);
            session.put("DOWNLOAD_STATUS","finished");
        }
        return NONE;
    }
}

您还可以通过指定Content-Length响应标头(response.setHeader("Content-Length", 1337);)如此处所述，使浏览器为您绘制进度条，您还可以在其中看到类似的机制来防止并发下载.

You can also have the browser drawing a progressbar for you by specifying the Content-Length response header (response.setHeader("Content-Length", 1337);) as described here, where you can also see a similar mechanism to prevent concurrent downloads.

在 IsDownloadFinished.action 中，您需要检查会话属性.我不存在或不同于完成，这表示下载尚未开始或仍在进行中，因此什么也不做.否则，返回一个成功的httpheader，它将使您的jQuery $ .ajax函数运行success:回调.您可以使用httpHeader或json，如此处所述:

In the IsDownloadFinished.action, you need to check the session attribute. I it doesn't exist or is different from finished, it means the download is not started yet, or still in progress, hence do nothing. Otherwise, return a succesfull httpheader that will make your jQuery $.ajax function to run the success: callback. You can use either httpHeader or json, as described here:

@Results({
    @Result(name = ActionSupport.SUCCESS, type="httpheader", params = {"status", "200"}),
    @Result(name = ActionSupport.ERROR,   type="httpheader", params = {"error",  "500"})
})
public class IsDownloadFinished extends ActionSupport implements SessionAware {

    @Setter private Map session;

    public String execute(){            
        if ("finished".equals(session.get("DOWNLOAD_STATUS")) {
            session.remove("DW_STATUS");
            return SUCCESS;
        }
        return ERROR;
    }
}

对此问题有不同的解决方案，我已经向您展示了最简单的解决方案.
更优雅，更复杂的解决方案将涉及长期存在的请求和彗星技术(阅读:WebSocket)，但是我想您可以从这个启动示例中的轮询计时器开始，根据您的需要对其进行自定义，并最终在对参数更满意的情况下进行发展.

There are different solutions to this problem, I've shown you the simplest one.
More elegant and complex solutions would involve long-held requests and Comet techniques (read: WebSocket), but I suppose you can start with the polling-timer from this kick-off example, customizing it for your needs, and eventually evolving it when more comfortable with the argument.

这篇关于下载文件后如何隐藏动画gif?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！