jQuery:隐藏图像直到调整大小完成

Question

我网站上图像的大小和填充是根据浏览器窗口的大小计算的。它们在加载后就会淡入，但有时是在调整大小之前。如何让它们在加载并调整大小后才淡入？

// 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);

});

Answer 1

调整大小后可能会触发自定义事件

.trigger('resized')

然后绑定(bind)到它

.bind('resized', function() {...