2

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?

// Fade in images once loaded
$('img').hide().not(function() {
    return this.complete && $(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);

});
lizzmo
  • 201
  • 1
  • 13
  • since everything is in percentage, why can't this all be done with css media queries? – charlietfl Jun 04 '12 at 10:40
  • The site has a horizontal scroll so I can't base the image widths off of a percentage of the width of their containing element. As far as I can tell they have to be based off of the equation I'm using. – lizzmo Jun 04 '12 at 10:59
  • do a search in SO for a better image preloader. jQuery load has caveats for cached images. Read load docs http://api.jquery.com/load-event/ – charlietfl Jun 04 '12 at 11:01

1 Answers1

0

maybe trigger a custom event once you've resized

.trigger('resized')

and then bind to that

.bind('resized', function() {...
Jahnold
  • 7,623
  • 2
  • 37
  • 31