jQuery each not functioning correctly

Question

I have a slider with 10 slider elements. However, only 7 out of 10 elements are rendered, given my data structure contains 20 sets. The site is hosted here

The code in question

function populateCarousell(cdata) {
    var x = 0;  //debug
    jQuery(".wslide-slides .wslide-slide").each(function() {
        var single = cdata.shift();
        var jcurrSlide = jQuery(this);
        jcurrSlide.find(".wslide-caption-text").text(single.title);
        jcurrSlide.find("a").attr('href', "https://carousell.com/p/" +single.id);
        jcurrSlide.css({'background-image':Base64.decode('dXJs')+'('+single.primary_photo_full_url+')'});
        jcurrSlide.css({'background-image':'contain'});
        jcurrSlide.css({'background-position':'50% 50%'});
        jcurrSlide.css({'background-repeat': 'no-repeat'});
        x++;  //debug
        jcurrSlide.find(".wslide-slide-inner2").removeAttr('style').find("img").css({'display':'none'});
    });
    alert(x);   //Outputs 7
}

which is activated by (to ensure page fully loaded)

function caroDataCallback(data) {
    if(document.readyState != "complete" ) {
        setTimeout(function() { caroDataCallback(data); }, 2000);
    }
    else{
        populateCarousell(data);
    }
}

Upon examination in Chrome, the results is

Answer 1

That's because your page is not fully loaded when you call populateCarousell(cdata) function in your javascript file. Try instead of using $(document).ready() , use the $(document).load() to make sure all the images are loaded before you initiate your carousel.

Update : Use $(window).on('load', function() { .. }); instead.

Hope this helps.