私のサイトの画像のサイズとパディングは、ブラウザウィンドウのサイズに基づいて計算されます。ロードするとフェードインしますが、サイズが変更される前にフェードインすることもあります。ロードしてサイズを変更した後でのみフェードインさせるにはどうすればよいですか？
// 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);
});