title: The retina image is not loading after DOM using retina.js - CSS/JavaScript
body: <p>I am trying to replace a regular image with retina display image (@2x) using retina.js javascript library. But problem is that the original image is not getting replaced with the retina image. In fact there is no image in high resolution devices and the div containing <code>&lt;img&gt;</code> is blank. However when i checked through firebug then src was retina image. But i don't know why it is not loaded on the page. One important thing i want to tell you that this regular image is not loaded by default on page loading. In fact the container of image i.e. parent div is <code>display:none</code> at start and appears only after certain condition becomes true using jQuery code. Then it becomes <code>display:block</code> and image appears. I think this could be the reason why retina.js doesn't load the dynamic image. Here is my code -</p>
  
  <p>Just before <code>&lt;/body&gt;</code> tag -</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/retina-1.3.0.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="top_header_flash_wrapper"&gt; &lt;!-- top_header_flash_wrapper starts here --&gt;
      &lt;div id="top_header_flash"&gt; &lt;!-- top_header_flash starts here --&gt;
          &lt;div id="flash_logo"&gt; &lt;!-- logo starts here --&gt;
              &lt;a href="#"&gt;&lt;img src="images/logo.png" border="0" alt="logo" /&gt;&lt;/a&gt;
          &lt;/div&gt; &lt;!-- logo ends here --&gt;
          &lt;div id="flash_top_nav"&gt; &lt;!-- top_nav starts here --&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Digital Strategy.&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Search.&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Social.&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Conversions.&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="contact_us"&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- top_nav ends here --&gt;
          &lt;div class="clr"&gt;&lt;/div&gt;
      &lt;/div&gt; &lt;!-- top_header_flash ends here --&gt;
  &lt;/div&gt; &lt;!-- top_header_flash_wrapper ends here --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#top_header_flash_wrapper
  {
      background:#FFFFFF;
      box-shadow:0 0 4px #363636;
      display:none;
      position:fixed;
      top:0;
      width:100%;
      z-index:99999;
      padding:10px 0;
  }
  
  #top_header_flash
  {
      width:980px;
      margin:0 auto;
  }
  
  #flash_logo
  {
      width:20.4%;
      float:left;
  }
  
  #flash_top_nav
  {
      width:53.99%;
      float:right;
      padding-top:10px;
  }
  
  #flash_top_nav ul
  {
      margin:0;
      padding:0;
      list-style-type:none;
  }
  
  #flash_top_nav ul li
  {
      float:left;
  }
  
  #flash_top_nav ul li a
  {
      font-family:'a_avantetckheavy', Arial, sans-serif;
      display:block;
      text-align:center;
      text-decoration:none;
      color:#94917A;
      margin-left:15px;
      padding-top:6px;
  }
  
  #flash_top_nav ul li a:hover
  {
      border-bottom:2px solid #A8CF38;
  }
  
  #flash_top_nav ul li.contact_us a
  {
      background:#A8CF38;
      padding:6px 12px;
      color:#FFFFFF !important;
  }
  
  #flash_top_nav ul li.contact_us a:hover
  {
      border-bottom:none;
      background:#86A821;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>// top nav slidedown and slideup
  var height = $('#top_header_flash_wrapper').height();
  $(window).scroll(function(){
      if(window.innerWidth &gt; 768 &amp;&amp; $(this).scrollTop() &gt; height)
      {
          $('#top_header_flash_wrapper').slideDown();
      }
      else
      {
          $('#top_header_flash_wrapper').slideUp();
      }
  });
  </code></pre>
  
  <p>The other regular images which loads on default page loading works with retina but only this conditional image doesn't work. How can i make retina.js to load retina image for a regular image which is not on DOM startup?</p>