slideshow that doesn't load all images first

**ggalan** · 09-09-2011, 02:48 PM

i have a jquery slide show that works well like this

Code:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
td a { margin: 5px }
.nav { margin: 5px 0 }
#nav a{ margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #999; text-decoration: none }
#nav a.activeSlide { background: #000 }
#nav a:focus { outline: none; }
#output { text-align: left; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
<script type="text/javascript">
$(function() {
    $('#s4').before('<div id="nav" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav'
    });
});
</script>
</head>
<body>
<div id="s4" class="pics">
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
</body>
</html>

when i add lots of images to the list this method downloads all images first causing the initial load time to be unbearable.
is there a way to load only what is visible?

i have tried using this but without success

Code:

$(new Image()).load(function(){
	// code here
});

**jscheuer1** · 09-09-2011, 04:41 PM

If you create a preloading function, that will only at best do nothing, at worst it will cause additional loading time.

Your problem isn't that the images aren't preloading, it's that they're loading at an inconvenient time. Preloading would take just as much time, so you might want to short circuit the loading and do it incrementally.

Anyways, the way you have the script in your post doesn't appear to preload anything. The:

Code:

$(function() {
    $('#s4').before('<div id="nav" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav'
    });
});

function should fire before images load, it should fire as soon as the browser has parsed the HTML.

However, the images and hence the page will continue to load after that. So with a bunch of images you would have a situation where the slideshow is perhaps ready to show the first few, and the page is still loading the other images. The icon(s) on the browser that indicate loading are still whirling around or whatever they do to indicate the page is in its loading state, but you should see the first image, and if you were to click on the nav button for the next image, it should come up. That is unless the slideshow is held back until all its images load.

What sometimes happens though is that you start seeing all or some of all of the images. To remedy that see "Why do all my images (slides) display briefly when the page loads?" on:

http://jquery.malsup.com/cycle/faq.html

But, if you're loading up a bunch of images, that takes time no matter how it's done. With cycle these images are on the page, so load with the page. You might be able to have them not be on the page and use cycle's undocumented (from the copy of jquery.cycle.all.2.72.js linked to in your code):

Code:

// provide a mechanism for adding slides after the slideshow has started
function exposeAddSlide(opts, els) {
	opts.addSlide = function(newSlide, prepend) {
		var $s = $(newSlide), s = $s[0];
		if (!opts.autostopCount)
			opts.countdown++;
		els[prepend?'unshift':'push'](s);
		if (opts.els)
			opts.els[prepend?'unshift':'push'](s); // shuffle needs this
		opts.slideCount = els.length;

		$s.css('position','absolute');
		$s[prepend?'prependTo':'app

function to add in images after things get going with the first few.

You could ask about that in the jQuery forum:

http://forum.jquery.com/using-jquery-plugins

Other alternatives would be to experiment with other slideshows. The Ultimate Fade-in show:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

with Extra Buttons:

http://www.dynamicdrive.com/forums/blog.php?b=248

can probably handle the slideshow duties. And since its images aren't initially a part of the DOM, there might not be the problems you're having.

Another script that can do this, but the interface for numbered buttons is tricky, is:

http://www.dynamicdrive.com/dynamici...army/index.htm

Its claim to fame here is that it specifically holds back all but the next two images from loading. It does an incremental preload. So, while you're viewing one image, the next two are preloaded.

**ggalan** · 09-09-2011, 05:40 PM

With cycle these images are on the page, so load with the page. You might be able to have them not be on the page and use cycle's undocumented (from the copy of jquery.cycle.all.2.72.js linked to in your code)

thats exactly what i was looking for, will ask in the jQuery plugin forum

**ggalan** · 09-09-2011, 06:02 PM

so adding thumbnails to this method would be tricky

Code:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    // start slideshow 
    $('#slideshow').cycle({ 
        fx:      'fade', 
        timeout:  500, 
        before:   onBefore 
    }); 
 
    var slidesAdded = false; 
     
    function onBefore(curr, next, opts) { 
        // make sure we don't call addSlide before it is defined 
        if (!opts.addSlide || slidesAdded) 
            return; 
         
        // add slides for images 3 - 8 
        // slides can be a DOM element, a jQuery object, or a string 
        for (var i=3; i < 9; i++) 
            opts.addSlide( '<img src="http://cloud.github.com/downloads/malsup/cycle/beach'+i+'.jpg" width="200" height="200" />' ); 
        slidesAdded = true; 
    }; 
}); 
</script>
</head>
<body>
<div id="slideshow" class="pics">
	<img class="first" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
</div>
</body>
</html>

**jscheuer1** · 09-11-2011, 04:33 PM

I didn't say that. And what do you mean by thumbnails? Before you just had auto-generated numbered links. It looks like if you have a pager defined in the call (like in your first post) that opts.addSlide() will auto-generate a link to it at the same time that it adds the image to the slideshow.

If you want actual thumbnail images. You could alter those links after they're created. Like make their .html(''), and add a backgroundImage and change their dimensions via .css() and/or use hard code css in a stylesheet for some or all of that.

There may be a better way to do those last steps. Like after the nav is created and fully populated, create other links and bind to each of them the click of the corresponding pager link. Make the pager links display none from the beginning.

You could ask about how best to do that in the same forum I mentioned before.

Thread: slideshow that doesn't load all images first

Thread Tools

Search Thread

slideshow that doesn't load all images first

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions