Question

我正在尝试为现场活动编写幻灯片，其中图片将在许多无线设备上播放。由于网络拥塞，我想添加功能以在转换之前保持幻灯片显示指定的时间，但是预加载下一个图像并且如果图像没有完全加载则保持转换直到它完成。不幸的是，我是一个Javascript新手，只能编写这么多代码。

以下是我为幻灯片放映服务的网页代码。由于我们更新了图像池，因此它是一个PHP脚本，每五分钟重新加载一次，并为幻灯片提供新的幻灯片。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="refresh" content="300" >
<title>Slideshow</title><!-- -->

<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#myslides').cycle({
        fit: 1, pause: 1, timeout: 4000
    });
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />

<body>
<?php
$directory = 'images/slideshow';    
try {       
    // Styling for images   
    echo '<div id="myslides">'; 
    foreach ( new DirectoryIterator($directory) as $item ) {            
        if ($item->isFile()) {
            $path = $directory . '/' . $item;   
            echo '<img style="width:600px;height:600px;" src="' . $path . '"/>';    
        }
    }   
    echo '</div>';
}   
catch(Exception $e) {
    echo 'No images found for this slideshow.<br />';   
}
?>
</body>
</html>

我知道循环插件具有可以调用函数的before选项我认为这是正确的方向，但不知道如何使用它来调用预加载函数。

任何帮助都将不胜感激。

Answer 1

我不会给你整个代码，但有些想法是如何做到的。

1，使用循环使用next / prev按钮选项而不是超时。隐藏将触发加载下一张图像的按钮。

2）添加一个新的图像元素，其显示/不透明度设置为无/透明，宽度为0等，这样可以使图像不显示（但仍然加载到缓存中）。我认为如果显示器关闭，它不会加载，但我不知道。

3）使用image onload函数查看图像何时加载，并在周期中手动触发下一个链接/功能。

Answer 2

我编写了一个用于预加载图像的JavaScript模块。看看它，也许它会帮助你：

http://test.neilgirardi.com

它是用“普通旧”JavaScript而不是jQuery编写的。这意味着您可以在加载jQuery之前执行它。（越早开始预加载图像就会越早准备好）。加载图像后，模块可以触发回调。如果回调需要jQuery，您可以告诉模块在运行回调之前等待jQuery加载。

上述链接指向的页面包含一个演示，该演示使用该插件预加载3.1MB的图像，并在图像全部加载后开始循环幻灯片放映。

根据OP的反馈进行更新：

好的，所以你想要开始一个包含X个图像的幻灯片，然后每五分钟添加一些新图像，这是正确的吗？

我要做的是实例化我的图像预加载器类的对象以预加载第一批图像。预加载器回调将启动幻灯片放映。

然后我会有一个updateImage（）JavaScript方法。此方法将以五分钟为间隔运行。每次触发该方法时，它都会对后端进行异步调用，后者会将下一批图像作为JSON对象返回。接下来，该方法将实例化一个新的预加载器对象以加载新批量的图像。这个新预加载器的回调会将图像附加到幻灯片HTML，从而将它们添加到旋转中。

如何在显示前在幻灯片中进行下一张幻灯片预加载

2 个答案: