title: jQuery: Hide images until resizing completes
body: <p>The size and padding of the images on my site are calculated based on the size of the browser window. They fade in once they've loaded, but sometimes thats before they've been resized. How can I make them only fadein once they've loaded and been resized?</p>
  
  <pre><code>// Fade in images once loaded
  $('img').hide().not(function() {
      return this.complete &amp;&amp; $(this).fadeIn();
  }).bind('load', function () { $(this).fadeIn();
  });
  
  $(window).bind("load", function () {
  
  // Responsive gallery image width
  var max600 = window.matchMedia('screen and (max-width:600px)');
  if (max600.matches) {
      var widthPercent = (((($(window).width()) * 0.78) / ($('.gallery ul').width())) * 100) + '%';
      $('.image').css('width', '').css('width', widthPercent);
  }
  var max800 = window.matchMedia('screen and (min-width: 601px) and (max-width:800px)');
  if (max800.matches) {
      var widthPercent = (((($(window).width()) * 0.65) / ($('.gallery ul').width())) * 100) + '%';
      $('.image').css('width', '').css('width', widthPercent);
  }
  var min801 = window.matchMedia('screen and (min-width: 801px)');
  if (min801.matches) {
      var widthPercent = (((($(window).width()) * 0.5) / ($('.gallery ul').width())) * 100) + '%';
      $('.image').css('width', '').css('width', widthPercent);
  }
  
  // Responsive gallery image margins
  var newPadding = (((($(window).width()) * 0.11) / ($('.gallery ul').width())) * 100) + '%';
  $('.image').css('padding-left', '').css('padding-left', newPadding);
  
  });
  </code></pre>