title: How to use image tag in body of html instead of loading image from css?
body: <p>I am reloading the div every <code>10 seconds</code> without reloading the whole page. And also when refresh happens, it greys out my div and show the refresh image and after refresh is done, it loads the data in my div table and it is working fine.</p>
  
  <p>Below is the refresh image I am using -</p>
  
  <p><img src="https://i.stack.imgur.com/OTRii.gif" alt="enter image description here">.</p>
  
  <p><strong>Problem Statement:-</strong></p>
  
  <p>Below is my JSP file <code>(dataInfo.jsp)</code> and I am reloading the div <code>container</code> every 10 seconds without reloading the full page.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id='headerDivDash'&gt;
          &lt;h1 id='topHeaderDash'&gt;
            &lt;!-- some image here --&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="vertical-list" style='display: block; list-style-type: none;'&gt;
          &lt;ul class="resp-tabs-list"&gt;
              &lt;a href="_blank"&gt;&lt;li&gt;Test 1&lt;/li&gt;&lt;/a&gt;
              &lt;br /&gt;
              &lt;a href="_blank"&gt;&lt;li&gt;Test 2&lt;/li&gt;&lt;/a&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- just need to reload this div, other div should be intact without getting appended --&gt;
      &lt;div class="container"&gt;
  
      &lt;/div&gt;
      &lt;div class="footer"&gt;Some Value Here&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now below is the jquery script I am using to load the <code>div container</code> every 10 seconds and it works fine. I am able to see the refresh image and it also greys out so everything is working good so far.</p>
  
  <pre><code>// Create a refresh function:
  function refresh(){
      // SHOW overlay
      $('#overlay').show();
      // Retrieve data:
      $.ajax({
          url: 'dataInfo.jsp',
          type: 'GET',
          success: function(data){
              // onSuccess take only the container content
              var content =  $($.parseHTML(data)).filter(".container"); 
              //Replace content inside the div
              $('.container').replaceWith(content);
              // HIDE the overlay:
              $('#overlay').hide();
          }
      });
  }
  
  $(document).ready(function(){
      // Create overlay and append to body:
      $('&lt;div id="overlay"/&gt;').css({
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: $(window).height() + 'px',
          opacity:0.4, 
          background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
      }).hide().appendTo('body');
  
      // Execute refresh with interval:
      setInterval(refresh, 1 * 1000);
  });
  </code></pre>
  
  <p>Now as you see above, I have hardcoded the url for image. If I deploy my code in the production, then it will block this url because of firewall so somehow I need to load this image from my local folder in the project.</p>
  
  <p>My directory structure is like this -</p>
  
  <pre>webapp/
  |-- resources/
  |   +-- img/
  |           page-loader.gif
  +- WEB-INF/
    +-- views/
          dataInfo.jsp</pre>
  
  <p>I tried using the path like this <code>background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center'</code> it doesn't work that way also somehow. </p>
  
  <p>So my question is - Is there any way I can rewrite the <code>overlay div</code> in my above jquery in the body of html somehow? Then I can use image tag which will work for me for sure.</p>
  
  <pre><code>&lt;img src="page-loader.gif" /&gt; 
  </code></pre>