jQuery每个都无法正常运行

Question

我有一个带有10个滑块元素的滑块。但是，由于我的数据结构包含20组，因此只渲染了10个元素中的7个。该网站已托管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

这是因为当你在javascript文件中调用populateCarousell(cdata)函数时，你的页面没有完全加载。尝试使用$(document).ready()而不是使用$(document).load()，以确保在启动轮播之前已加载所有图像。

更新：改为使用$(window).on('load', function() { .. });。

希望这有帮助。