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

Question

I'm trying to write a slideshow for a live event where pictures will be played on many wireless devices. 我正在尝试为现场活动编写幻灯片，其中将在许多无线设备上播放图片。 Because of network congestion I want to add functionality to hold the slideshow for a specified time before transitioning but preload the next image AND if the image hasn't fully loaded hold the transition until it does. 由于网络拥塞，我想添加功能以在过渡之前将幻灯片放映一段指定的时间，但是要预先加载下一张图像，如果图像还没有完全加载，请在过渡之前保留过渡。 Unfortunately I'm a Javascript newbie and can only code so much. 不幸的是，我是一名Javascript新手，只能编写很多代码。

Below is the code for the webpage i have serving a slide show. 以下是我提供幻灯片放映的网页代码。 Since we update the image pool it's a php script that reloads every five minutes and gives new slides to the slideshow. 由于我们更新了图像池，因此它是一个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>

I know the cycle plugin has the before option that can call a function I think that's the right direction to go in but not sure how to use that to call a preload function. 我知道cycle插件具有可以调用函数的before选项，我认为这是正确的选择，但不确定如何使用它来调用预加载函数。

Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

Im not going to give you the whole code, but some ideas how to do it. 我不会为您提供完整的代码，但会提供一些实现方法的想法。

1, use cycle with next/prev button options instead of timeout. 1，使用带有下一个/上一个按钮选项的循环来代替超时。 Hide the buttons that will trigger the loading of the next image. 隐藏将触发下一张图像加载的按钮。

2) add a new image element with display/opacity set to none/transparent, width 0 etc, something like that to make the image not show up (but still load into cache). 2）添加一个新的图像元素，其显示/不透明度设置为无/透明，宽度0等，以使图像不显示（但仍加载到缓存中）。 i think if display is off, it wont load, but i dont know. 我认为如果显示关闭，则不会加载，但我不知道。

3) use image onload function to see when image has finished loading, and manually trigger the next link/funciton on cycle. 3）使用图像加载功能查看图像何时完成加载，并手动触发下一个链接/功能。

Answer 2

I wrote a JavaScript module for preloading images. 我编写了一个用于预加载图像的JavaScript模块。 Check it out, maybe it will help you: 检查一下，也许它将对您有所帮助：

http://test.neilgirardi.com http://test.neilgirardi.com

It's written in "plain old" JavaScript as opposed to jQuery. 它是用“普通的” JavaScript而不是jQuery编写的。 This means you can execute it before jQuery has loaded. 这意味着您可以在jQuery加载之前执行它。 (the sooner you start preloading the sooner the images will be ready). （越早开始预加载图像就越早准备好）。 The module can fire callbacks once the images are loaded. 加载图像后，模块可以触发回调。 If the callback requires jQuery you can tell the module to wait for jQuery to load before running the callback. 如果回调需要jQuery，则可以告诉模块在运行回调之前先等待jQuery加载。

The page that the above link points to contains a demo which uses the plugin to preload 3.1MB worth of images and start a cycle slideshow once the images have all loaded. 上面链接指向的页面包含一个演示，该演示使用该插件预加载了3.1MB的图像，并在所有图像加载完毕后开始循环播放幻灯片。

Update based on OP's feedback: 根据OP的反馈进行更新：

Okay, so you want to start a slideshow with X number of images and then add Y number of new images every five minutes, is that correct? 好的，所以您想开始以X张图片开始幻灯片放映，然后每五分钟添加Y张新图片，这是正确的吗？

What I would do is instantiate an object of my image preloader class to preload the first batch of images. 我要做的是实例化图像预加载器类的对象以预加载第一批图像。 The preloader callback would start the slideshow. 预加载器回调将开始幻灯片放映。

Then I would have an updateImage() JavaScript method. 然后，我将拥有一个updateImage（）JavaScript方法。 This method would run on a five-minute interval. 该方法将每隔五分钟运行一次。 Each time the method is triggered it would make an asynch call to the backend which would return the next batch of images as a JSON object. 每次触发该方法时，都会对后端进行异步调用，该调用将返回下一批图像作为JSON对象。 Next the method would instantiate a new preloader object to load the new batch of images. 接下来，该方法将实例化新的预加载器对象以加载新的图像批处理。 The callback of this new preloader would append the images to the slideshow HTML, thereby adding them to the rotation. 这个新的预加载器的回调会将图像添加到幻灯片HTML中，从而将它们添加到旋转中。

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

问题描述

2 个解决方案

解决方案1
0 2013-09-08 17:45:37

解决方案2
0 2013-09-08 18:47:01

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

问题描述

2 个解决方案

解决方案1 0 2013-09-08 17:45:37

解决方案2 0 2013-09-08 18:47:01

解决方案1
0 2013-09-08 17:45:37

解决方案2
0 2013-09-08 18:47:01