Too much recursion with jQuery.load and pictures

Question

Hello,

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.

Answer 1

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

itemFallbackDimension: 10

to your jCarousel options object and see if things improve. (The value 10 here is arbitrary, use whatever you like)