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

How Can I make next slide Preload in Slideshow before Display

本文关键字：幻灯片 一张 加载 显示      更新时间：2023-09-26

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

任何帮助将不胜感激。

我不打算给你整个代码，但会给你一些如何做的想法。

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

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

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

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

http://test.neilgirardi.com

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

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

根据OP的反馈进行更新：

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

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

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

相关文章：