jQuery.load 和图片的递归过多
我有一个奇怪的随机问题。这是我有问题的代码的示例。它的目的是创建一个对 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 返回 carousel 中有 11 张图片。
通常，“太多递归”消息是由于无限循环而发生的，但我在代码中看不到。我一无所知。
I have a weird, random problem. Here's a sample of my problematic code. It's purpose is to create a jQuery jCarousel control over a list of ul/li elements. But I need the elements inside to be vertically centered, so I'm calculating a padding-top for each of them once the picture they contain is loaded.
<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>
Error encountered is very random, but goes as follows :
With this code and only this code : on Firefox 3.6, only some pictures will go through the load(), completely randomly; on IE8, no picture at all will go through the load(), even pressing Ctrl+R.
The IE problem brought me to use this plugin, which according to the jQuery documentation, can help when there are interferences between the browser cache and the load() event. Result is that now, sometimes it works, and sometimes (completely randomly, Ctrl+R or not) I have "too much recursion" messages on Firefox, and "Out of memory" exceptions on IE. The second console.log in my code shows that some pictures are loaded multiple times.
Whatever happens, the jCarousel is loaded properly, and the first console.log returns that there are 11 pictures in the carousel.
Usually a "too much recursion" message happens because of an infinite loop, but I can't see one in my code. I'm clueless.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您使用的是最新版本的 jCarousel 吗？当我尝试你的代码时，我从 jCarousel 得到一个异常，指出由于没有为元素设置宽度和高度，因此将会发生无限循环，如果在你的版本中未处理，这将解释你的“太多递归”和内存不足错误。
尝试将选项添加
到 jCarousel 选项对象中，看看情况是否有所改善。 （这里的值10是任意的，你喜欢用什么就用什么）
Are you using the latest version of jCarousel? When I try your code I get an exception from jCarousel stating that since no width and height is set for the elements an infinite loop will occur, which if unhandled in your version would explain your "too much recursion" and out of memory errors.
Try passing adding the option
to your jCarousel options object and see if things improve. (The value 10 here is arbitrary, use whatever you like)