Technical Blogs July 5, 2013 By Ryan Schuhler Staff
Here is another script that we developed for the redesign of Liferay.com. The goal for this script was to help with loading times on pages with a lot of images as well as provide a way to effectively implement transitions/animations. It isn't too complicated, but useful nevertheless.
In order to use lazy load all you need to do is add the class "lazy-load" to whatever element you desire. If you want to lazy load an image add the class and instead of placeing the img url into "src", place it in an attribute called "datasrc". This is useful for a number of things, whether it is speeding up initial load time by loading images when you scroll to them, or by adding a class when you scroll to something and utilizing that class to add transitions or animations to the respective element.
Lazy load will happen when the div reaches the bottome of the visible screen. It only happens once, so once it is loaded the class and loaded image will stay there until refresh.
The code could look something like this:
See it in action here (to see the lazy load adding the classes in this example you can inspect and check the console, it prints out all the lazy-load elements onscroll, so you can see which elements have been loaded already)