0

我正在尝试为将在许多无线设备上播放图片的现场活动编写幻灯片。由于网络拥塞，我想添加功能以在转换之前将幻灯片保持指定时间，但预加载下一个图像，如果图像尚未完全加载，则保持转换直到它完成。不幸的是，我是 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 选项，我认为这是正确的方向，但不确定如何使用它来调用预加载函数。

任何帮助，将不胜感激。

4

2 回答 2

0

我不会给你整个代码，而是一些如何去做的想法。

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

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

3）使用图像加载功能查看图像何时加载完成，并手动触发下一个链接/功能循环。

于 2013-09-08T17:45:37.357 回答
0

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

http://test.neilgirardi.com

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

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

根据 OP 的反馈进行更新：

好的，所以您想以 X 个图像开始幻灯片放映，然后每五分钟添加 Y 个新图像，对吗？

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

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

于 2013-09-08T18:47:01.950 回答