"data-cycle-loader=wait“for "cycle2.js”不起作用

Question

我有一些php代码，它从一个通用文件夹中随机选择11张图片，然后使用cycle2.js将它们显示在幻灯片中，这在整个站点和根目录的不同级别上都可以使用。

我的问题是:无论我试过什么，11张图片都会加载到垂直堆栈中，然后在幻灯片开始之前折叠。除此之外，其他一切都运行得很好。我的印象是"data-cycle-loader=wait“应该做我想要实现的事情(预加载)，但似乎不起作用。

下面是一个精减到相关元素的页面：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Some Title</title>
        <meta name="description"
              content="Some Description" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
<body>
<div class="cycle-slideshow  data-cycle-loader=wait">
    <?php
        $images = array();
        $directory = $_SERVER["DOCUMENT_ROOT"] . '/images_carosel/';
        if ($handle = opendir($directory)) {
        while (false !== ($file = readdir($handle))) {
        if (preg_match("/\.png$/", $file)) $images[] = $file;
            elseif (preg_match("/\.jpg$/", $file)) $images[] = $file;
            elseif (preg_match("/\.jpeg$/", $file)) $images[] = $file;
            elseif (preg_match("/\.gif$/", $file)) $images[] = $file;
            }
        shuffle($images);
        closedir($handle);
        }
    ?>
    <?php
        for($i= 0; $i < 11; $i++) {
        echo '<img src="/images_carosel/'.$images[$i].'" alt="Some Description" title="Some Description" >';
        }
    ?>
</div>
<script src="jquery.min.js"></script>
<script src="jquery.cycle2.js"></script>
</body>
</html>

Answer 1

我不得不做一些研究来找出你的问题。

问题出在浏览器/pc的速度上。因为图像是用PHP加载的(服务器端)。html直接将它们放到输出中。加载车身后，cycle2滑块开始工作。这意味着你将在很短的时间内看到你所有的图像。(取决于浏览器/pc的速度)。

解决方案:只用php设置一个图像，然后在滑块运行时添加其余的图像。我已经根据你的代码创建了一个代码来进行测试，它对我来说是有效的。

<?php

$firstImage = ''; // Store the first image we will echo with php
$imagesLink = array(); // array with <img.... strings

// Your old code
$images = array();
$directory = $_SERVER["DOCUMENT_ROOT"] . '/images_carosel/';
if($handle = opendir($directory)) {
    while (false !== ($file = readdir($handle))) {
        if(preg_match("/\.png$/", $file)) $images[] = $file;
        elseif(preg_match("/\.jpg$/", $file)) $images[] = $file;
        elseif(preg_match("/\.jpeg$/", $file)) $images[] = $file;
        elseif(preg_match("/\.gif$/", $file)) $images[] = $file;
    }
    shuffle($images);
    closedir($handle);
}
for($i= 0; $i < 11; $i++) {
    // No echo enymore but store them in the array
    array_push($imagesLink, '<img src="/images_carosel/'.$images[$i].'" alt="Some Description" title="Some Description" >');
}
$firstImage = $imagesLink[0]; // Get the first image from array
array_shift($imagesLink); // Remove this image from array te prevent double images
$comma_Images = implode(",", $imagesLink); // Convert everything to an string for casting to JS

?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>Some Title</title>
        <meta name="description"
              content="Some Description" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <script src="jquery311.js"></script>
        <script src="jquery.cycle2.js"></script>
        <script>
            $(function(){
                var img = '<?php echo $comma_Images; ?>'; // Get the php image strings
                var imgArr = img.split(","); // Convert to JS array
                for (var i=0; i < imgArr.length; i++) {
                    $('.cycle-slideshow').cycle('add', imgArr[i]); // Add them to the cycle
                }
            });
        </script>
    </head>
    <body>
        <div class="cycle-slideshow" data-cycle-loader="wait">
        <?php 
            echo $firstImage; // add the first image by php so slider has something to init
        ?>
    </div>
    </body>
</html>

我希望这能帮你解决这个问题。祝好运。