title: How to create a Progress Bar when image is loading from a Server using Spring Mvc
body: <p>I'm trying to insert an Progress Bar (it doesn't need to show how much of the file is downloaded until the moment, it just need to show that the page is waiting for the load) in my JSP file while an file is loaded. I've seen this site to create and .git which would be my progress bar. </p>
  
  <p><a href="http://preloaders.net/" rel="nofollow">http://preloaders.net/</a></p>
  
  <p>I'm retrieving an image from the Spring server by using this:</p>
  
  <pre><code>&lt;img class="ImgMapa" alt="${andar.caminhoImagem}" src="UploadServlet?getfile=${andar.nomeImagem}" /&gt;
  </code></pre>
  
  <p>This image is retrieved from server when I click in a link.</p>
  
  <pre><code>&lt;a href="#${andar.numero}" class="btn btn-primary" data-toggle="tab"&gt;${andar.numero}º Andar&lt;/a&gt;
  </code></pre>
  
  <p>How do I know when the image is completly dowloaded through jQuery? This way I can show the progress bar GIF and then, when the image is loaded, I can hide it.</p>
  
  <p>Is there a better way to do it? If not, how can I use this idea to have the GIF shown while the image is downloaded?</p>
  
  <p>EDIT:</p>
  
  <p>This the method I get the image:</p>
  
  <pre><code>    @RequestMapping("UploadServlet")
          public void doGet(HttpServletRequest request,
                  HttpServletResponse response) throws ServletException, IOException {
  if (request.getParameter("getfile") != null
                      &amp;&amp; !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) &amp;&amp; ((bytes = in.read(bbuf)) != -1)) {
                          op.write(bbuf, 0, bytes);
                      }
  
                      in.close();
                      op.flush();
                      op.close();
                  }
              }
  </code></pre>