javascript - 为什么我的 jQuery 图像大小调整代码只能间歇性地工作？

Question

第一次发帖。我到处搜索类似的问题，但一无所获，所以这里开始吧。

我目前正在使用少量的 jQuery 来按比例缩放一组图像以在图像轮播中显示(感谢 SO 用户提供了大部分代码)。旋转木马由 jCarousel Lite 插件 ( here ) 提供支持。我有 4 个不同的图像集，它们是使用导航菜单选择的。选择新图像集时，以下 jQuery 调整大小代码将对集中的每个图像执行，然后使用 #slider div 中新调整大小的图像初始化图像轮播。

问题:这段代码只是有时有效，看似随机。当 slider 初始化时，如果图像没有成功缩放，所有宽度都会增加到最大宽度，从而裁剪图像的底部。这个问题对于纵向图像尤其明显，因为 slider 是为横向图像 (900px x 600px) 设计的。无论顺序或点击次数、窗口大小或浏览器如何，我都无法确定导致代码成功或失败的原因。

知道为什么这段代码会随机成功执行吗？

//The following scales images proportionally to fit within the #slider div
$('#slider ul li img').each(function() {
    var maxWidth = $('#slider').outerWidth(false); // Max width for the image
    var maxHeight = $('#slider').outerHeight(false);    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
    ratio = maxWidth / width;   // Ratio for scaling image
    $(this).css("width", maxWidth); // Set new width
    $(this).css("height", height * ratio);  // Scale height based on ratio
    height = height * ratio;    // Reset height to match scaled image
}

var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if current height is larger than max
if(height > maxHeight){
    ratio = maxHeight / height; // Ratio for scaling image
    $(this).css("height", maxHeight);   // Set new height
    $(this).css("width", width * ratio);    // Scale width based on ratio
    width = width * ratio;    // Reset width to match scaled image
}
});
initialize(); //initializes the jCarousel Lite carousel

Answer 1

你试过在窗口加载时运行它吗 jQuery(window).load(function() {

这将有助于确保所有图像在检查尺寸之前都可用