Monday, August 1, 2011

WordPress Advanced Image Lazy Load

Get from codecanyon


Your website has many image intensive content and take up a lot of resources when loading up? Your boss and your clients consider the pages fluidity a serous matter?

Remember that time is money!

Plugin Description

With WP Image Lazy Load plugin, no more need to sacrifice your beautiful images quality!

Family galleries, portfolios, news reports with a lot of photos. This plugin is providing a better user experience by delaying loading of images in (especially in long) web pages. Images outside of visible part of the page that the user is viewing wont be loaded before user scrolls down to them.
Get from codecanyon

Main Features :

  • Ready to use, no action is needed for existing or future images on posts/pages
  • Improving images selection performance by customizing default selectors for several site sections
  • Cascading enabling/disabling levels : 
  1. Level 1 : Enable or disable for the whole website
  2. Level 2 : Enable or disable for all posts and pages
  3. Level 3 : Enable or disable for all images within a specific post or page
  4. Level 4 : Enable or disable for a specific post's or page's image
  • Customizing the loading of images
  • Possibility to also lazy load theme images which are not part of posts/pages.

WP Advanced Image Lazy Load is available in the following languages :
  • English
  • French

Speed up your website by lazy loading images JUST on demand!

Installation guide

Plugin upload

Plugin activation

Plugin Settings

Getting started

The simple activation of the plugin is enough to have the desired behavior for all the posts and pages images.
By default the lazy load is activated via severals global levels

Global Enabling Levels

Posts/Pages Enabling Level

Images Enabling Level

Images Enabling/Disabling by css class

Customizing Loading Image

Enabling or disabling loading effect for better speed result

Advanced Features - Themes Hacks  (JUST for version before 4.0)

The plugin does its magic for you when it comes to images within posts or pages. If you want to reuse the same mechanism for your own theme's images that are not part of posts body:
  1. Make sure your image belongs to the selector scope
  2. Set the src attribute of the img tag with this function helper as value get_wp_lazy_loading_blank_image()
  3. Add a "lazy" class to the img
  4. Add a "data-original" attribute to the img tag with the original image URI

For example instead of having:
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>"  width='290' height='160' />

Rather write:

<?php if(function_exists('get_wp_lazy_loading_blank_image')){ ?>
<img class="lazy" data-original="<?php echo $image[0]; ?>" src="<?php echo get_wp_lazy_loading_blank_image(); ?>" alt="<?php the_title(); ?>"  width='290' height='160' />   
<?php } else { ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>"  width='290' height='160' />
<?php } ?>