Question

第一篇文章。我已经搜索过类似问题的高低，并空手而归，所以这里就是这样。

我目前正在使用一小部分jQuery来按比例缩放图像集合，以便在图像轮播中显示（感谢SO用户对此代码的大部分内容）。轮播由jCarousel Lite插件（here）提供支持。我有4个不同的图像集，使用导航菜单选择。选择新图像集时，将对集合中的每个图像执行以下jQuery调整大小代码，然后使用#slider div中新调整大小的图像初始化图像轮播。

问题：此代码有时只能起作用，看似随机。当滑块初始化时，如果图像未成功缩放，则所有宽度都会增加到最大宽度，从而裁剪图像的底部。这个问题对于纵向图像尤其明显，因为滑块的形状适合横向图像（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() {

上运行它

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

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

1 个答案: