使用 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();
});

试试这个，也许该节点在页面 init 上不存在

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

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