1

我正在尝试在我的 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();
                }
            }
4

1 回答 1

0

您的进度条可能看起来像这样：

<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用图像中最接近的父级进行替换以获得更好的性能。

于 2013-03-09T01:21:19.437 回答