jquery - Flexslider 2，如何用(document).ready函数加载

Question

我在我的 WordPress 框架中使用 WooThemes Flexslider 2 插件。
这是代码：

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

该脚本适用于"$(window).load(function() {"

如果我​​将"$(window).load(function() {"更改为"$(document).ready(function(){ "滑块不起作用。在 Safari 中，脚本加载成功，但没有获取当前图像高度。如何使此脚本在所有浏览器上与"$(document).ready(function(){"

一起使用？ 谢谢

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

});