0

我有一个奇怪的随机问题。这是我有问题的代码的示例。它的目的是在 ul/li 元素列表上创建一个 jQuery jCarousel 控件。但是我需要将里面的元素垂直居中，所以一旦加载了它们包含的图片，我就会为它们中的每一个计算一个 padding-top。

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#caroussel-cards").jcarousel({ "wrap": 'both', "animation": 800, "scroll": 4, "auto": 6, "easing": 'easeInOutQuint' });
    console.log(jQuery("#caroussel .visual img").length); // Always returns 11
    jQuery("#caroussel .visual img").load(function (event) {
        var img = jQuery(this);
        console.log(img.attr('src'));
        img.css('paddingTop', (156 - img.height()) / 2); // 156 is carousel's height
    });
});
</script>

<div id="caroussel">
    <ul id="caroussel-cards" class="jcarousel-skin-cards">
        <!-- Actually there are 11 li elements -->
        <li>
            <div class="visual">
                <a href="#"><img src="/Content/img/check.jpg" border="0" alt="" /></a>
                <a href="#" class="bt_command"></a>
            </div>
        </li>
    </ul>
</div>

遇到的错误非常随机，但如下所示：

  • 使用此代码且仅此代码：在 Firefox 3.6 上，只有一些图片会完全随机地通过 load()；在 IE8 上，根本没有图片会通过 load()，即使按 Ctrl+R。

  • IE 问题让我使用了这个插件，根据 jQuery 文档，当浏览器缓存和 load() 事件之间存在干扰时，它可以提供帮助。结果是现在，有时它可以工作，有时（完全随机，Ctrl+R 与否）我在 Firefox 上有“太多递归”消息，在 IE 上有“内存不足”异常。我的代码中的第二个 console.log 显示一些图片被多次加载。

不管发生什么，jCarousel 都正确加载了，第一个 console.log 返回轮播中有 11 张图片。

由于无限循环，通常会出现“太多递归”消息，但我在代码中看不到。我一无所知。

4

1 回答 1

0

您使用的是最新版本的 jCarousel 吗？当我尝试您的代码时，我从 jCarousel 收到一个异常，指出由于没有为元素设置宽度和高度，因此将发生无限循环，如果在您的版本中未处理，则会解释您的“递归过多”和内存不足错误。

尝试通过添加选项

itemFallbackDimension: 10

到您的 jCarousel 选项对象，看看情况是否有所改善。（这里的值 10 是任意的，随意使用）

于 2010-10-12T16:04:18.230 回答