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

该脚本适用于“$（窗口）.load（function（）{”

如果我更改“$（窗口）.load（function（）{”到“$（文档）.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);

});

Flexslider 2，如何加载（文件）.ready功能

1 个答案: