A lazy load image sounds bad, doesn't it? But it's a good thing that will make your site run faster. That's not new for you that images do hurt the page load time more than anything else. Probably you already looked for a decision, maybe you even tried to use smaller images or even reduced their quality, still none of these things is needed.
Think about, your site has pages with huge length, it means that your users have to scroll down a while so they do not see the whole page immediately after they come there. Wouldn't it be nice to load only those pictures that come within the visible part of a screen? After they have read the text or have enjoyed all pics, right in that moment they starts scrolling and other pictures start loading.
This technology is called lazy loading and it's opposite to preloading images. We preload images for a lot of reasons. The classic example is in that old school JavaScript (and even CSS) rollovers, where we preload the rollover image so that there's no delay when they're needed. Here's a round-up of 10 awesome WordPress Lazy Load plugins that would fasten your site and save the bandwidth. Happy optimizing!
***
jQuery.sonar
The plugin helps improve page load time and server bandwidth. Images are loaded only when they become visible to the user.
(function($) {
$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
var img = this,
$img = jQuery(img),
src = $img.attr( 'data-lazy-src' );
$img.unbind( 'scrollin' ) // remove event binding
.hide()
.removeAttr( 'data-lazy-src' )
.attr( 'data-lazy-loaded', 'true' );;
img.src = src;
$img.fadeIn();
});
})(jQuery);
***
jQuery Image Lazy Load
jQuery Image Lazy Load WP adds jQuery lazy loading to images.
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
***
BJ Lazy Load
The plugin makes your site work faster and saves bandwidth. Uses jQuery and degrades gracefully for non-JS users.
_placeholder_url = plugins_url( '/img/placeholder.gif', __FILE__ );
if (get_option( 'bjll_include_css', 1 )) {
add_action( 'wp_print_styles', array($this, 'enqueue_styles' ) );
}
if (get_option( 'bjll_include_js', 1 )) {
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
}
$theme_caller = get_option( 'bjll_theme_caller' );
if ( $theme_caller == 'wp_head' ) {
add_action( 'wp_print_scripts', array( $this, 'output_js_options' ) );
} else {
add_action( 'wp_print_footer_scripts', array( $this, 'output_js_options' ) );
}
add_action( 'wp_ajax_BJLL_get_images', array( $this, 'get_images_json' ) );
add_action( 'wp_ajax_nopriv_BJLL_get_images', array( $this, 'get_images_json') );
add_filter( 'the_content', array( $this, 'filter_post_images' ), 200 );
if ( intval( get_option( 'bjll_filter_post_thumbnails', 1 ) ) ) {
add_filter( 'post_thumbnail_html', array( $this, 'filter_post_thumbnail_html' ), 10 );
}
}
***
Lazy Widget Loader
The plugin provides lazy loading for widgets to improve page loading. Use on slow widgets with content from Facebook, Twitter, AdSense.
'; // #lwl-widget-contents } } add_action( 'wp_print_styles', 'LWL_wp_print_styles' ); /** * Enqueues styles for non-admin pages. */ function LWL_wp_print_styles() { global $LWL_version; $settings = LWL_get_settings(); if ( !isset($settings['load_widget_css'] ) ) { _LWL_update_settings( $settings ); $settings = LWL_get_settings(); } if ( !is_admin() ) { wp_enqueue_style( 'lazy-widget-loader', LWL_PLUGIN_URL . 'css/lwl.css', array(), $LWL_version ); if ( $settings['load_widget_css'] ) { wp_enqueue_style( 'lazy-widget-loader-css', LWL_PLUGIN_URL . 'css/lwl-widget.css', array(), $LWL_version ); } else if ( $settings['generate_widget_css'] ) { wp_enqueue_style( 'lazy-widget-loader-css', LWL_PLUGIN_URL . 'css/lwl-widget-css.php', array(), $LWL_version ); } } } add_action( 'admin_print_styles', 'LWL_admin_print_styles' ); /** * Enqueues scripts for admin pages. */ function LWL_admin_print_styles() { global $LWL_version; if ( is_admin() ) { wp_enqueue_style( 'lazy-widget-loader-admin', LWL_PLUGIN_URL . 'css/lwl-admin.css', array(), $LWL_version ); } } //add_action( 'admin_print_scripts-settings_page_plugin-admin-page', 'LWL_admin_print_scripts' ); add_action( 'admin_print_scripts', 'LWL_admin_print_scripts' ); function LWL_admin_print_scripts() { global $LWL_version; wp_enqueue_script( 'lazy-widget-loader-admin', LWL_PLUGIN_URL . 'js/lazy-widget-loader-admin.js', array( 'jquery' ), $LWL_version ); } add_action( 'wp_head', 'LWL_widget_alter', 100 ); /** * Widget customization callback. * Alters widgets to add our customized options. */ function LWL_widget_alter() { global $wp_registered_widgets; foreach ( $wp_registered_widgets as $id => $widget ) { if ( ! isset( $wp_registered_widgets[$id]['LWL_original_callback'] ) ) { array_push( $wp_registered_widgets[$id]['params'], $id ); $wp_registered_widgets[$id]['LWL_original_callback'] = $wp_registered_widgets[$id]['callback']; $wp_registered_widgets[$id]['callback'] = 'LWL_widget_alter_callback'; } } } /** * Widget customization callback. * Wraps itself around the original callback. */ function LWL_widget_alter_callback() { global $wp_registered_widgets; $params = func_get_args(); $id = array_pop( $params ); $original_callback = $wp_registered_widgets[$id]['LWL_original_callback']; ob_start(); call_user_func_array( $original_callback, $params ); $widget_content = ob_get_contents(); ob_end_clean(); $settings = LWL_get_settings(); if ( isset( $settings[$id]['use'] ) && $settings[$id]['use'] ) { if ( !function_exists( "IX_LL_lazyload" ) || ( isset( $settings[$id]['use-itthinx-lazyloader'] ) && ( $settings[$id]['use-itthinx-lazyloader'] === false ) ) ) { _LWL_set_widget( $id, $widget_content ); $widget_content = '
***
Ai Loader
Ai Loader - jQuery Lazy Load plugin enables images really lazy loading. The plugin delays the loading of images in long web pages by not loading immediately the images that are outside of the viewport (visible part of the web page).
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img.wp-post-image").lazyload({
effect:"fadeIn",
placeholder: "$placeholdergif"
});
});
EOF;
}'
***
YS Images Lazyload
This plugin is inspired by jQuery lazyload, however this one focus to make sure that all browsers to lazy load all image src attribute. Which means using YS images lazyload plugin, your images will be loaded lazily in all browsers. That would be a great thing to save your bandwidth.
(function(a){var b={init:function(d){return this.each(function(){a(this);var c=a.data(this,"YSlazyload");c?c._init.call(this,d):(a.data(this,"YSlazyload",b),b._init.call(this,d))})},_init:function(d){var c=this,f=a.extend({},a.fn.YSlazyload.settings,d);b.reposition.call(c,f);a(window).bind("scroll.YSlazyload resize.YSlazyload",function(){b.reposition.call(c,f)}).triggerHandler("scroll.YSlazyload");return this},getHolder:function(){var d=a.extend({},a.fn.YSlazyload.settings);return a(this).filter("["+
d.srcHolder+"]")},reposition:function(d){var c=b.getHolder.call(this),f=a(window).height(),g=a(document).scrollTop();a(document).height();var h=d.holderTop;c.each(function(){var e=a(this),b=e.offset();0===e.height()&&(e.width(2),e.height(2));if(0
***
WP YouTube Lyte
This plugin allows you to lazy load your video's by inserting “Lite YouTube Embeds”. This looks and feels like an embedded YouTube but only call the actual “fat” Flash or HTML5-player when clicked on.
var bU='".$lyteSettings['path']."';style = document.createElement('style');style.type = 'text/css';rules = document.createTextNode('.lyte img {border:0px !important;padding:0px;spacing:0px;margin:0px;display:inline;background-color:transparent;} .lL {margin:0px 0px 10px 0px;} .lyte {margin:5px 0px;} .lP {background-color:#fff;} .pL {cursor:pointer;text-align:center;overflow:hidden;position:relative;margin:0px;} .tC {left:0;top:0;position:absolute;width:100%;background-color:rgba(0,0,0,0.6);} .tT {padding:5px 10px;font-size:16px;color:#ffffff;font-family:sans-serif;text-align:left;} .ctrl {position:absolute;left:0px;bottom:0px;}');if(style.styleSheet) { style.styleSheet.cssText = rules.nodeValue;} else {style.appendChild(rules);}document.getElementsByTagName('head')[0].appendChild(style);";
echo "";
}
***
WP Image Preloader
WP Image Preloader is a plugin for WordPress made to help you speed up your blog. It pre-loads images using the Javascript technique.
(function(jQuery) {
var cache = [];
jQuery.preLoadImages = function(){
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery);
***
MooTools Image Lazy Load
With this plugin your images will be loaded after your visitors scroll down the page. That means your users' browsers don’t have to load images they don’t wish to view.
var LazyLoad = new Class({
Implements: [Options,Events],
/* additional options */
options: {
range: 200,
image: 'blank.gif',
resetDimensions: true,
elements: 'img',
container: window
},
/* initialize */
initialize: function(options) {
***
Remote API
Basic use of this plugin is lazy loading of content and performing cross-blog actions. It also includes an example of lazy loading widgets plugin, though it is aimed on the developers who would like to built on top of this functionality.
set( 'api_key', SECRET_KEY );
***