Lazy Loading Images in Javascript

3

I’ve been meaning to implement a lazy loading technique for images on the the ecommerce websites that I develop for, especially in the search results area.   Loading the images as the user scrolls down the page, should hopefully increase page load time, making EVERYONE happy.

My searches have come across two solutions that seem quite promising, and that I’m going to implement (and test).

  • jQuery Unveil – This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them.  This plugin is also QUITE lightweight.
  • http://www.appelsiini.net/projects/lazyload – Mika Tuupola’s implementation that so many others have used / forked.
Advertisements

JavaScript Patterns

using_patterns_0

A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns

Read more via JavaScript Patterns.

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane.

jQuery: » Building a Slimmer jQuery

 

 

 

 

 

 

 

jQuery: » Building a Slimmer jQuery.

For all you web developers, please take note of some potential upcoming changes for jQuery.

In particular, I use the .live() event quite a bit.  Looks like I’ll be changing to using .on() or .delegate().