jQuery каждый не работает правильно

Question

У меня есть ползунок с 10 элементами слайдера. Тем не менее, только 7 из 10 элементов отображаются, так как моя структура данных содержит 20 наборов. На сайте размещен here

кода в вопросе

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 
} 

который активируется (для обеспечения страницы полностью нагруженной)

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

При осмотре в Chrome, результаты являются

Answer 1

Это потому, что ваша страница не загружена полностью, когда вы вызываете функцию populateCarousell(cdata) в свои javas cript файл. Попробуйте вместо использования $(document).ready(), используйте $(document).load(), чтобы убедиться, что все изображения загружены, прежде чем вы начнете свою карусель.

Обновление: вместо этого используйте $(window).on('load', function() { .. });.

Надеюсь, это поможет.