Nivo Slider - how to call slider after AJAX content load

问题

My Code:

<script type="text/javascript">
 jQuery(window).load(function() {
  jQuery('#slider02').nivoSlider({
   controlNav: true,
   effect: 'boxRainGrow',
   animSpeed: 1500,
   pauseTime: 8000  
  });
 });
</script>

<div class="slider-wrapper theme-default">
 <div id="slider02" class="nivoSlider">     
  <span id="zone933">
   <script type="text/javascript">
    jQuery('#zone933').load('/content.phtml);
   </script>
  </span>
 </div>
</div>

How to make Nivo Slider waits until the ajax content will be loaded? Because, sometimes it works sometimes not.. it depends on refreshes of browsers. The first visit of page doesn't display the Slider, after refresh and ajax content load, it displays is OK.

SO i need to do something like wait until the ajax request is completed and than call the Slider. I have tried to add: jQuery(document).ajaxComplete(function{ "here my code" });

But it doesn't work. I am using it with PHP functions so I have the calling of slider in PHP function so the function is calling the jQuery code and html code of slider and the parameter of function is the name of element id for example "zone933". The PHP works correctly; if I use simple images or images with links it works perfect. I doesn't work properly only I use ajax load.

回答1:

Try something like this:

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#zone933').load('/content.phtml', function () {
        jQuery('#slider02').nivoSlider({
            controlNav: true,
            effect: 'boxRainGrow',
            animSpeed: 1500,
            pauseTime: 8000  
        });
    });
});
</script>

<div class="slider-wrapper theme-default">
 <div id="slider02" class="nivoSlider">     
  <span id="zone933">
  </span>
 </div>
</div>

来源：https://stackoverflow.com/questions/9925159/nivo-slider-how-to-call-slider-after-ajax-content-load