Apr 22nd

Lazy Loader Plugin for Joomla

Posted in: Joomla | View Comments
  • Share

Lazy Loader for JoomlaBuilt upon the jQuery library and the work done by Mika Tuupola, this plug-in for Joomla loads images on long pages of a websites when the image appears in the users view pane.

The idea and concept works is the exact opposite of preloading images before a web page loads. Lazy Loader actually loads images when needed. This reduces bandwidth use and also server resources they are only called and downloaded when needed. Definitely a recommended plugin for large websites with long pages that are heavily image based, such as blogs or image galleries.

An example of the plug-in in action can be seen at:
http://www.pbwebdev.com.au/blog/awe-inspiring-joomla-designed-websites

Installing and Configuring Lazy Loader for Joomla

Simply download the plug-in, install in the backend of Joomla, and enable it in the Plug-in Manager.

The default settings should be the most compatible with most Joomla sites but further tweaking of the parameters may be required in order to get the plug-in to work correctly.

Parameters of Lazy Loader

Parameters of Lazy Loader

Definition of Parameters

jQuery Library
This allows for the selection of different jQuery insertions to your site.

  • Async: This uses the asynchronous calling method to dynamically load the compressed jQuery library
  • Static: This calls the compressed jQuery library via a static URL
  • Disable: Disables the insertion. Good when the library is already called by another extension.

Threshold
This refers to the amount of pixels away from the images and the “screen fold” to start loading the image. Default is “0″.

Placeholder
This is the default image that is used as the place holder before the real image is loaded. Default is: “/plugins/system/lazyloader/grey.png”

Effect
Refers to the type of image load effects apply. At the moment there is only appear and fade in. In later releases we’ll implement more image effects.

Event
This will load the images on different events. Events available are Scroll (default), on mouse over and on mouse click.

Container
The container refers to a specific div container that you might want the lazy loader to apply to only.

Failure Limit
This will limit the amount of image searches done by the plug-in before ending itself when there are errors. Default is 10.

Known Issues

There are some conflicts with other modules and components.

FrontPage Slide Show by JoomlaWork and some YooTheme Javascript enabled modules.

In later releases we’ll be improving the compatibility and also a Mootools version to work without jQuery in Joomla.

Version Notes

Version 1.1 – 23rd April 2010

  • Included new animation effects, slideUp, SlideDown
  • Cleaned up presentation of plugin parameters

Version 1.0 – 22nd April 2010

  • Released

Next Version

  • Mootools integration
  • Lots of bug fixes. LOTS

About jQuery and its LazyLoader Plugin by Mika Tuupola

If you’d like to learn more about the original jQuery plug-in please refer to Mika’s site and documentation: http://www.appelsiini.net/projects/lazyload

Download the Plug-In

If you use or like this plug-in, please vote and review it on the Joomla Extensions Directory

Tags: , ,
Posted in: Joomla | View Comments
Posted: Apr, 22, 2010

  • Oleg

    Amazing plugin!!!
    But unfortunately, still very buggy.
    Wish you the best!!!

  • http://www.pbwebdev.com.au/blog/ Peter Bui

    Yes, it really needs to be a mootools version to work with Joomla perfectly so I'm working on getting it working right. Once thats done then I hope it doesn't conflict with other extensions.

  • Sara

    Some bugs with CB Gallery and SIMGallery. Don't show images in tabs for bot components.

  • http://www.aarogya.com Anand

    Cool Plugin :)

  • http://catcoloringpages.org Max

    Very nice Plugin!! I gave you great comment at Joomla Extensions! Thank you again!

  • endchapter.net

    The theory behind this plugin is wonderful. I've been searching for something like this, however the mootools conflicts are way too common as most template navigation, slideshows, and other extensions commonly used get complicated with this plugin activated.

    One solution is to give the plugin parameters to declare which menu item to function on, and which to not. That is just an idea. My other solution is to find a way around the mootools conflict. Either solution, I'm not the guy that is capable of doing the work. I do hope you release a stable, less conflicting version that most people can use. Overall, great developing and I await the next release (although I am anxious for this plugin NOW lol)

  • endchapter.net

    Helpful FYI: Almost all JA templates (quickstart including extensions) have conflicted.

  • Markus

    Would really be great if you could add a feature to disable the plugin in a given #DIV

  • http://www.pbwebdev.com.au/blog/ Peter Bui

    Thank you for all of the comments. I'm working on the MooTools version to get it working properly in Joomla without conflicting with the majority of templates out there.

    Once that is done, I'll be working on a few more advanced options to make it more flexible and then upgrading it to Joomla 1.6.

    Thanks all.

    Regards,

    Peter

  • Anonymous

    Is there by anychance I can enable this plugin only in homepage (aka frontpage)? Thanks a lot for this wonderful plugin.

blog comments powered by Disqus