jquery - 在 jquery ui 选项卡中使用时，bxslider 图像不会加载

Question

我遇到图像无法在 jquery ui 和无 ui 选项卡中加载的问题。奇怪的是，在 Opera、Chrome 和 Firefox 上，如果我打开开发人员工具控制台并且向上或向下移动控制台，图像就会加载。图像在 IE 11 中完全失败

这是一个现场演示:

http://inetwebdesign.com/bxslider2/jquery-ui-tabs-accordion2.html

任何帮助将不胜感激。

问候，嗯

Answer 1

<强> DEMO 的 bxslider 在 jquery-ui 选项卡内

JS代码:

 $(function() {
     var slider2_initialized = false;
     var slider3_initialized = false;

     $( "#tabs" ).tabs({
         activate: function( event, ui ) {
            //console.log("ui = ");console.log(ui);
            var tab_id = $(ui.newPanel).attr('id');//alert(tab_id);

            if(tab_id == "tabs-2" && slider2_initialized == false)
            {    
                $('.bxslider2').bxSlider({
                  auto:true,
                  mode: 'fade',
                  captions: true
                }); 
                //update initialization flag to true
                slider2_initialized = true;
            }
            else if(tab_id == "tabs-3" && slider3_initialized == false)
            {    
                $('.bxslider3').bxSlider({
                  auto:true,
                  mode: 'fade',
                  captions: true
                }); 
                //update initialization flag to true
                slider3_initialized = true;
            }
         }
     });

$('.bxslider1').bxSlider({
  auto:true,
  mode: 'fade',
  captions: true
});     
});

HTML:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>
    <ul class="bxslider1">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</p>
</div>

<div id="tabs-2">
<p>
    <div style="margin:0;padding:0;">
    <ul class="bxslider2">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
    </div>
</p>
</div>

<div id="tabs-3">
<p>
    <ul class="bxslider3">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</p>
</div>
</div>