Question

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

<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上，即使按下Ctrl + R，任何图片都不会通过load（）。
IE问题让我使用this plugin，根据jQuery文档，当浏览器缓存和load（）事件之间存在干扰时，它可以提供帮助。结果是，现在，有时它工作，有时（完全随机，Ctrl + R或不）我在Firefox上有“太多的递归”消息，IE上有“内存不足”的例外。我的代码中的第二个console.log显示一些图片被多次加载。

无论发生什么，jCarousel都正确加载，第一个console.log返回旋转木马中有11张图片。

由于无限循环，通常会发生“过多的递归”消息，但我在代码中看不到。我很傻。

Answer 1

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

尝试传递添加选项

itemFallbackDimension: 10

到你的jCarousel选项对象，看看情况是否有所改善。（这里的值10是任意的，使用你喜欢的任何东西）

使用jQuery.load和图片进行过多的递归

1 个答案: