我网站上图像的大小和填充是根据浏览器窗口的大小计算的。它们在加载后会淡入,但有时是在调整大小之前。我怎样才能让它们在加载和调整大小后才淡入淡出?
// 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);
});