Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: Home

[SmartAddons.com] After some researching, our Joomla! templates acquired new ability. This time is to smoothly and seamlessly (and more...) handle a bulk of images, with support of Lazy Load library!

This ability helps Websites with enabling them to load images one by one within the current viewport not all the page. For remaining images if existing, this delays them before transferred to the actual loading process. So our visitors can be delivered Websites fast, view images when and where they want, not waiting long time to load all material of the Web. Our example here.

A. What is Lazy Load?

Lazy Load is a plugin for jQuery library. This is writtten in Javascript and must be used along with jQuery. Using Lazy Load 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.

B. Why using this?

There are many advantages from using this script:

Ability to set event before loading images

Visitors can "scroll to load" (default) or "click to load". "Click to load" activated by event click:

$("img.lazy").lazyload ({ event : "click"});

Ability to add effects, many effects to be used

All effects can be found here:

jQuery Effects

Ability to use with container, use plugin inside div:

This is an example:

Container Lazy Load

C. For developers

Declare Lazy Load after jQuery declaration:

<script src="/jquery.js" type="text/javascript"></script>
<script src="/jquery.lazyload.js" type="text/javascript"></script>

For each loading of image, use CUSTOM img tag like this one:

<img class="lazy" src="/img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

->"src" is the image default before filled by actual image, it is simply an image 1px with one color.

->"data-original" is the actual atribute to place your image url

And remember to activate the lazyload:

$("img.lazy").lazyload();

D. Reference

For other examples, let visit this page:

Lazy Load Project

There are links for downloading the script there, updated.

E. OUR TALK

Remember to check this demo for our SJ Education in reality with Lazy Load:

SJ Education

More example with Lazy Load

Don' forget that this template is now available in our Club, so let JOIN! to get it.

Thanks for reading.

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes