How Can I make next slide Preload in Slideshow before Display
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.
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.
<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.
Any help would be appreciated.
2 answers
solution1
0 2013-09-08 17:45:37
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. 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). 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.
solution2
0 2013-09-08 18:47:01
I wrote a JavaScript module for preloading images. Check it out, maybe it will help you:
It's written in "plain old" JavaScript as opposed to jQuery. This means you can execute it before jQuery has loaded. (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.
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.
Update based on OP's feedback:
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?
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. 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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.