title: how to remove white space when image loading?
body: <p>My phone-gap app getting output I have 4 images  sliding automatically it fixed any Device height and width my problem is while sliding images, I am getting white screen before image loading 
  my code is :-</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://responsiveslides.com/responsiveslides.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
      .caption {
          display: block;
          position: fixed;
          z-index: 2000;
          font-size: 20px;
          text-shadow: none
          color: #fff;
          background: #000;
          background: rgba(0,0,0, .8);
          left: 0;
          right: 0;
          bottom: 0;
          padding: 10px 20px;
          /*margin: -2;
          margin-top:-70px;*/
          max-width: none;
      }
      img {
          padding: 0;
          margin: 0;
      }
      .one{ 
          float:right
      }
      html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
      }
      .ui-content {
          padding: 0;
          margin: 0;
      }
      #container {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
      }
  &lt;/style&gt;
  &lt;script&gt;
      $(window).resize(function() {
          setHeight();
      });
  
      $(document).on('pageshow', '#index', function(){       
          setHeight();
      });
  
      function setHeight() {
          $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
          $.mobile.activePage.find('img').height(getRealContentHeight()-4);   
      }
  
      function getRealContentHeight() {
          var header = $.mobile.activePage.find("div[data-role='header']:visible");
          var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
          var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
          var viewport_height = $(window).height();
  
          var content_height = viewport_height - header.outerHeight() - footer.outerHeight() -2;
          if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) &lt;= viewport_height) {
              content_height -= (content.outerHeight() - content.height());
          } 
          return content_height;
      }
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div data-role="page" id="index"&gt;            
      &lt;div data-role="content" class="slideshow"&gt;
          &lt;div id="container"&gt;
              &lt;img src="1.jpg" alt="" height="100%" width="auto"/&gt;&lt;br/&gt;
              &lt;div  class="caption"&gt; &lt;font color="white"&gt;Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd&lt;br/&gt; asdasdasd asdadasd asdasdad&lt;/font&gt;&lt;a href="http://www.google.com" style="text-decoration: none"&gt;&amp;nbsp;&amp;nbsp;&lt;font color="white"&gt;&lt;span class="one"&gt;skip&lt;/span&gt;&lt;/font&gt;&lt;/a&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="container"&gt;
              &lt;img src="2.jpg" alt=""/&gt;&lt;br/&gt;
              &lt;div class="caption"&gt;&lt;font color="white" &gt;First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd&lt;br/&gt; asdasdasd asdadasd asdasdad&lt;/font&gt;&lt;a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none"&gt;&amp;nbsp;&amp;nbsp;&lt;font color="white"&gt;&lt;span class="one"&gt;skip&lt;/span&gt;&lt;/font&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="container"&gt;
              &lt;img src="3.jpg" alt=""/&gt;&lt;br/&gt;
              &lt;div class="caption"&gt;&lt;font color="white" &gt;three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd&lt;br/&gt; asdasdasd asdadasd asdasdad&lt;/font&gt;&lt;a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none"&gt;&amp;nbsp;&amp;nbsp;&lt;font color="white"&gt;&lt;span class="one"&gt;skip&lt;/span&gt;&lt;/font&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="container"&gt;
              &lt;img src="4.jpg" alt=""/&gt;&lt;br/&gt;
              &lt;div class="caption"&gt;&lt;font color="white" &gt;fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd&lt;br/&gt; asdasdasd asdadasd asdasdad&lt;/font&gt;&lt;a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none"&gt;&amp;nbsp;&amp;nbsp;&lt;font color="white"&gt;&lt;span class="one"&gt;skip&lt;/span&gt;&lt;/font&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
  
  
  $(document).on('pageshow', '#index', function(){ 
      $(".slideshow &gt; div:gt(0)").hide();
  
      setInterval(function() { 
          var currentSlide = $('.slideshow &gt; div:visible:first'),
              nextSlide = currentSlide.next();
  
          currentSlide.fadeOut(1)
          nextSlide.fadeIn(2000);
  
          if ((currentSlide.index() + 1) == 4) {
  
  
         Redirect();
  
          }
      },  2000);
      function Redirect() {
          window.location="https://www.google.co.in";
      }
  });
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My code is working nice but when image sliding first white screen will be displayed and then images display</p>
  
  <p>How to hide the white screen?</p>
  
  <p><a href="http://jsfiddle.net/rXU9y/" rel="nofollow">Demo</a></p>