Question

我网站上图片的大小和填充是根据浏览器窗口的大小计算的。它们在装载后会逐渐消失，但有时会在它们调整大小之前消失。如果加载并调整大小后，我怎样才能使它们变为fadein？

// 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('resized', function() {...

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

1 个答案: