jQuery Cycle 中的 DOM 怪异

Question

我正在从正在构建的 WordPress 网站中的一些幻灯片的目录中动态获取图像。有时它们会出现在页面上，有时则不会。

看着这个，我确信我需要某种预加载器来在循环插件执行其操作之前将我的图像初始化到 DOM 中，但我只是不知道在哪里插入相关代码。我的代码如下：

<?php
        function show_gallery($path){
            if($path == ""){
                return;
            }
            // Fix the path to be usable
            $path = "wp-content/themes/mytheme" . "$path";

            // Ignore files/paths that aren't usable
            $img_list = array_diff(scandir($path), array('.', '..', '.DS_Store'));
            $imgcount = count($img_list);
            if($imgcount > 1){
                echo "<div id=\"overlay-prev\"><img src='/wp-content/themes/grisedale/assets/gallery/prev.png' class='prev'></div>";
                echo "<div id=\"overlay-next\"><img src='/wp-content/themes/grisedale/assets/gallery/next.png' class='next'></div>";
            } else {
                echo "";
            }
            echo "<div id=\"current-image\">";
            // Spit out the images to be controlled by cycle
            foreach ($img_list as $img){
                echo "<img class='gallery-images' src='../../../$path$img'>\n";
            }
            echo "</div>";
        }
    ?>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#current-image').cycle({
            fx: 'fade',
            speed:  'fast', 
            timeout: 0,
            prev:    '#overlay-prev',
            next:    '#overlay-next', 
            containerResize: true
        });
    });
    </script>

老实说，图像都很小，如果有某种健全性测试，我可以用 PHP 进行，这可能就足够了。无论如何，我只需要将图像以可预测的方式加载到任何具有图库的页面中，而无需重新加载三到四次才能看到它们。干杯。

Answer 1

更新

因此，jQuery 循环插件的技巧是为图像设置特定的宽度和高度。我设置了一个宽度，显然对于大多数浏览器来说这还不够。我还设置了最小高度，现在一切都按预期进行。