Flexslider 2, how to load with (document).ready function

Question

I use the WooThemes Flexslider 2 plugin in my WordPress framework.
Here is the code:

$(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'));
                }
            });
        }
    });
});

The script works well with "$(window).load(function() {"

If I change the "$(window).load(function() {" to "$(document).ready(function(){" the slider doesn't work. In Safari the script loads successful, but doesn't get the current image height. How to make this script to work with "$(document).ready(function(){" on all browsers ?

Thanks

Answer 1

You can write an interval function which looks at the first image within your $('#flexslider-<?php echo $postid; ?>') element. Once it has finished loading, call the flexslider function.

This is to give you a hint, not tested:

$(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);

});