0

第一篇文章。我已经在高处和低处搜索过类似的问题，但空手而归，所以就这样吧。

我目前正在使用少量 jQuery 来按比例缩放图像集合以显示在图像轮播中（感谢 SO 用户提供的大部分代码）。轮播由 jCarousel Lite 插件（此处）提供支持。我有 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
4

1 回答 1

0

您是否尝试过在窗口加载时运行它jQuery(window).load(function() {

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

于 2012-05-21T04:26:52.760 回答