圖像旋轉木馬滑塊不工作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或撥號等非常慢的網絡連接時，超時可能會非常棘手，在這種情況下，您可能需要一些更復雜的代碼才能確切瞭解何時加載圖像。