WordPress Lazy Load Plugins: Easy Way to Improve Your Site’s Performance

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!

***

The plugin helps improve page load time and server bandwidth. Images are loaded only when they become visible to the user.

12345678910111213(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 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;}

***

The plugin makes your site work faster and saves bandwidth. Uses jQuery and degrades gracefully for non-JS users.

123456789101112131415161718192021222324252627282930313233343536_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 );}}

***

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 – 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).

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 jQuery(document).ready(function($){  if (navigator.platform == "iPad") return;  jQuery("img.wp-post-image").lazyload({  effect:"fadeIn",  placeholder: "$placeholdergif"  }); });  EOF; }'

***

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***

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 is a plugin for WordPress made to help you speed up your blog. It pre-loads images using the Javascript technique.

1234567891011(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);

***

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.

123456789101112131415var LazyLoad = new Class({  Implements: [Options,Events],  /* additional options */ options: { range: 200, image: 'blank.gif', resetDimensions: true, elements: 'img', container: window },  /* initialize */ initialize: function(options) {

***

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 );

***

When you're just starting out as a freelancer, it's easy to fall into the habit of taking any assignment that comes right away, and one of those brought Alex to TemplateMonster. Now he joins the ranks of the blog columnists who are eager to write more and more.

This entry was posted on Friday, April 6th, 2012 at 2:00 am and is filed under Usability tips, WordPress Themes. You can follow any responses to this entry through the RSS 2.0 feed.Responses are currently closed, but you can trackback from your own site.

View the original article here