Delays Loading of Images with Lazy Loader jQuery Plugin

In: web resources

1 Oct 2009

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy loader on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

There are options for control maniacs who need to fine-tune. You can set threshold on how close to the edge image should come before it is loaded. You can also set placeholder image and custom event to trigger loading. You can check out the demo with FadeIn Effect enabled.

Requirements: jQuery Framework
Demo: http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
License: MIT License


Sponsors

Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS


Go to Source

1 Response to Delays Loading of Images with Lazy Loader jQuery Plugin

Avatar

bertyblunt

February 1st, 2010 at 8:38 pm

I know it's been done,

but it would be difficult, as both create functions that would conflict (particularly the critical $() function.)

I think it makes a lot more sense to just pick one or the other, because combining the two adds a lot of confusion and very little advantages.

They really do most of the same things, albeit in different ways.

I've personally moved more towards JQuery as I really like the AJAX and selection tools better.

Good luck to you.

Comment Form

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.