图像旋转木马滑块不工作bxSlider

Question

这是我的旋转木马是如何显示为

在我的代码IVE

包括

<!-- bxSlider CSS file --> 
     <link rel="stylesheet" href="<c:url value="/resources/css/jquery.bxslider.css" />" type="text/css" /> 
     <script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery.js" />"></script> 
     <!-- bxSlider Javascript file --> 
     <script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery.bxslider.js" />"></script> 

进出口动态插入我的图片到UL标签

<ul class="bxslider" id="img_carousel"/> 


            var img_data='data:image/jpeg;base64,' + base64Encode(data); 
        $("<li>", { html: '<img style="width:55px;height:55px" src="' + img_data + '"/>' }).appendTo("#img_carousel"); 

并在此im之后

$('.bxslider').bxSlider(); 

这是我的HTML看起来像

我该如何解决这一问题？

Answer 1

我不能肯定地说，但它可能是因为图像在UL填充前.bxSlider（）函数运行

我的建议是尝试这样的：

setTimeout(function(){ 
    $('.bxslider').bxSlider(); 
},500); 

当然，500可能太长，如果确实有效，我会尝试将它降低到10，然后继续上升，直到您获得良好表现。此外，在处理3G或拨号等非常慢的网络连接时，超时可能会非常棘手，在这种情况下，您可能需要一些更复杂的代码才能确切了解何时加载图像。