Lazy loading of images with jQuery

A very important feature of a website is definitely the speed of loading pages. Despite a slow site that takes too long to show us what we want, in fact, most of the users closes the page by switching to an alternative site or competitor. The Internet is not a tool for patient people ;-)

The technique of Lazy Loading (translated into "lazy loading") of images is precisely to avoid long waits and unnecessary within a web page. This programming technique is not, in fact, refers to images, but covers all the resources "useless" when it loads, riorse that will, of course, retrieved "on demand" when there is a need.

We will face the discourse of images as they are essentially the heaviest part of a web page. The user starts a page is not necessarily all will view the images, perhaps because they are hidden or simply because they placed at the bottom or in an area distant from where the user wants to access to information.
Such situations occur mainly for very large pages, as are those of the blog (which, in accusation of many comments, can be very long). In circumstances such as this makes no sense to load all the images at startup, especially those located at the bottom because it could never be viewed!

To implement the lazy loading technique can be implemented in different ways.
The most obvious that comes to mind is to remove the images on the fly from the DOM using JavaScript. But this would also be wrong because the way most browsers still have not forwarded the request of the image and you would get the full desired effect.
A good technique, highlighted in the article by Paul Hammond Speed ​​Up Your Site with Content Delayed is, instead, to use custom attributes in HTML5. Let's see how.

• <<
• 1
• 2
• 3
• >>