如何在使用Spring Mvc从服务器加载图像时创建进度条

Question

在加载文件时，我尝试在JSP文件中插入一个进度条(它不需要显示下载了多少文件，它只需要显示页面正在等待加载)。我已经看到这个网站创建和.git，这将是我的进度条。

http://preloaders.net/

我使用以下命令从Spring服务器检索图像：

<img class="ImgMapa" alt="${andar.caminhoImagem}" src="UploadServlet?getfile=${andar.nomeImagem}" />

当我点击一个链接时，这张图片是从服务器上检索的。

<a href="#${andar.numero}" class="btn btn-primary" data-toggle="tab">${andar.numero}º Andar</a>

如何知道镜像何时通过jQuery完全下载？这样，我可以显示进度条GIF，然后，当图像加载时，我可以隐藏它。

有没有更好的方法呢？如果没有，我如何使用这个想法在下载图像时显示GIF？

编辑：

这是我得到图像的方法：

    @RequestMapping("UploadServlet")
        public void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
if (request.getParameter("getfile") != null
                    && !request.getParameter("getfile").isEmpty()) {
                File file = new File(request.getServletContext().getRealPath("/")
                        + "resources/imgs/" + request.getParameter("getfile"));
                if (file.exists()) {
                    int bytes = 0;
                    ServletOutputStream op = response.getOutputStream();

                    response.setContentType(getMimeType(file));
                    response.setContentLength((int) file.length());
                    response.setHeader("Content-Disposition", "inline; filename=\""
                            + file.getName() + "\"");

                    byte[] bbuf = new byte[1024];
                    DataInputStream in = new DataInputStream(new FileInputStream(
                            file));

                    while ((in != null) && ((bytes = in.read(bbuf)) != -1)) {
                        op.write(bbuf, 0, bytes);
                    }

                    in.close();
                    op.flush();
                    op.close();
                }
            }

Answer 1

您的进度条可能如下所示：

<img id="progressBar" style="display:none;" src="...../loading.gif">

​

​

所以

jQuery(function () {
    $('a.btn-primary').click(function () {
        $('#progressBar').show();
    });
    $('img.ImgMapa').load(function () {
        $('#progressBar').hide();
    });
});

我不知道你使用的是什么版本的jQuery，但是.load()最近已经停用了。

因此，如果最新版本：

$('img.ImgMapa').on('load',function () {
    $('#progressBar').hide();
});

试试这个，也许这个节点在页面初始化中不存在

$(document).on('load','img.ImgMapa', function () {
   $('#progressBar').hide();
});

为了获得更好的性能，您可以将document替换为与图像最接近的父可选图像。