JavaScript LazyLoad functionality

[craig@kudo]

Hi,
I am implementing a website that incorporates a javascript slideshow of very large images and would like to incorporate "lazy loading" of the images (i.e. only load the current and next image, then when the next image is viewed load the following image) - does anyone have suggestions on good places to start?

Many thanks,
Craig.
Web Design Cornwall

 

[bcee]

I wrote this script to allow the same effect, IE: the images are only loaded when called. Let me know if you need further explanation.

js:

// feather light slide show by brad candullo
	// http://bcandullo.com
	
	var slide = 0;
	var banner = $('#banner');
	var bnav = $('#banner-nav');
	var btext = $('#banner-text');
	var image = $('#image');
	var images = new Array();
	var titles = new Array();
	var links = new Array();
	
	function initFS(_images, _titles, _links) {
		// pass vars and display banner
		images = _images;
		titles = _titles;
		links = _links;
		showBanner();
	}
	
	function nextSlide() {
		
		// if we are at the last slide go to the first
		if(slide + 1 >= images.length) {
			slide = 0;
			showBanner();
			return;
		}
		
		// increment slide and set banner
		slide ++;
		showBanner();
		
	}
	
	function previousSlide() {
		
		// if we are at the first slide go to the last
		if(slide == 0) {
			slide = images.length - 1;
			showBanner();
			return;
		}
		
		// increment slide and set banner
		slide --;
		showBanner();
		
	}
	
	function switchText() {
		
		btext.animate({width: 'toggle'}, 100);
		setTimeout(function() { btext.html('<strong>' + titles[slide] + '</strong>' + links[slide]) }, 200);
		btext.delay(300).animate({width: 'toggle'}, 100);
		
	}
	
	function switchImage() {
		
		image.hide();
		image.css('background-image', 'url(' + images[slide] +')');
		image.fadeIn(2000);
		
	}
	
	function showBanner() {
		
		// show image and text
		switchImage();
		switchText();
		
		// show banner
		bnav.css('visibility', 'visible');
		
	}
	
	// binding
	$('#banner-left').click(previousSlide);
	$('#banner-left').hover(function() {  $(this).fadeTo('fast', .75); }, function() { $(this).fadeTo('slow', 1); } );
	$('#banner-right').click(nextSlide);
	$('#banner-right').hover(function() {  $(this).fadeTo('fast', .75); }, function() { $(this).fadeTo('slow', 1); } );

To call:

// slide show
		var images = new Array('a/images/banner-0.jpg', 'a/images/banner-1.jpg');
		var titles = new Array('Arashi Beach. Oranjestad, Aruba', 'This is the second slide');
		var links = new Array('<a href="#">View deals on this beach</a>', '<a href="#">This is the second link</a>');
		initFS(images, titles, links);

 

[craig@kudo]

Thanks bcee

Thanks bcee for your reply and for sharing your code.

I'll take a look through your code and let you know how I get on.

Craig.

Web Design Cornwall

 

[bcee]

Thanks bcee for your reply and for sharing your code.

I'll take a look through your code and let you know how I get on.

Craig.

Web Design Cornwall

No problem, I should have added that it uses jQuery. I have some HTML also but if you can understand the script you can just change it to your targets/classes.

 

[craig@kudo]

thanks bcee - I didn't need to implement your solution in the end as my client has decided to compress his images. I'm not sure how easy it would have been to incorporate it as the content on the clients site was managed by Joomla. But, thank you for providing this code - I am sure that will be of use to someone, if not me in the future.

Regards,
Craig.

Web Design Cornwall

 

[craig@kudo]

thanks bcee - I didn't need to implement your solution in the end as my client has decided to compress his images. I'm not sure how easy it would have been to incorporate it as the content on the clients site was managed by Joomla. But, thank you for providing this code - I am sure that will be of use to someone, if not me in the future.

Regards,
Craig.

Web Design Cornwall

Actually the client changed their minds again, which meant I still needed lazyload functionality. However, I found the perfect solution within the Yahoo YUI. They have a javascript function known as ImageLoader that postpones the loading of images for X seconds or following a trigger (dom event) or both. This was easier to incorporate into my solution for the client as they needed to manage the images themselves.

Thought I'd post back in case it helps anyone else.

Web Design Cornwall
Wedding Photographer Cornwall

 

[computerGeek]

thanks for sharing your code.. with a little changes to the code, it will definitely help me with making my website more efficient.. thanks a lot..