Flexslider 2, как загрузить с (document) .ready function

Question

Я использую плагин WooThemes Flexslider 2 в своей структуре WordPress.
Вот код:

$(window).load(function() { 
    $('#flexslider-<?php echo $postid; ?>').flexslider({ 
     smoothHeight: true, 
     slideshow:  false, 
     start: function(slider) { 
      slider.container.click(function(e) { 
       if(slider.animating) { 
        // action 
       } else { 
        slider.flexAnimate(slider.getTarget('next')); 
       } 
      }); 
     } 
    }); 
}); 

Сценарий хорошо работает с "$ (окно) .load (функция() {"

Если изменить «$ (окно) .load (function() {" to " $ (document) .ready (function() {" слайдер не работает. В Safari скрипт загружается успешно, но не получает текущую высоту изображения. скрипт для работы с «$ (document) .ready (function() {" во всех браузерах?

Thanks

Answer 1

Вы можете написать функцию интервала, которая смотрит на первое изображение в вашем элементе $('#flexslider-<?php echo $postid; ?>'). Закончив загрузку, вызовите функцию flexslider.

Это должно дать вам подсказку, не тестируется:

$(document).ready(function(){ 
    var firstImage = $('#flexslider-<?php echo $postid; ?>').find('img').filter(':first'), 
     checkforloaded = setInterval(function() { 
      var image = firstImage.get(0); 
      if (image.complete || image.readyState == 'complete' || image.readyState == 4) { 
       clearInterval(checkforloaded); 
       $('#flexslider-<?php echo $postid; ?>').flexslider({ 
        // your options 
       }); 
      } 

     }, 20); 

});