├── images └── grey.gif ├── jq_img_lazy_load.php ├── js └── jquery.lazyload.min.js └── readme.txt /images/grey.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayn/wp-jquery-lazy-load/1da630ef83cf32f85e563b4ea115e0778b445cc4/images/grey.gif -------------------------------------------------------------------------------- /jq_img_lazy_load.php: -------------------------------------------------------------------------------- 1 | 26 | img.lazy { display: none; } 27 | 28 | 29 | EOF; 30 | } 31 | 32 | function action_enqueue_scripts() { 33 | wp_enqueue_script( 34 | 'jquery_lazy_load', 35 | plugins_url('/js/jquery.lazyload.min.js', __FILE__), 36 | array('jquery'), 37 | '1.7.1' // version of the lazyload script from https://github.com/tuupola/jquery_lazyload 38 | ); 39 | } 40 | 41 | function filter_the_content($content) { 42 | if (is_feed()) return $content; 43 | return preg_replace_callback('/(<\s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', array($this, 'preg_replace_callback'), $content); 44 | } 45 | 46 | function preg_replace_callback($matches) { 47 | // set flag indicating there are images to be replaced 48 | $this->do_footer = true; 49 | 50 | // alter original img tag: 51 | // - add empty class attribute if no existing class attribute 52 | // - set src to placeholder image 53 | // - add back original src attribute, but rename it to "data-original" 54 | if (!preg_match('/class\s*=\s*"/i', $matches[0])) { 55 | $class_attr = 'class="" '; 56 | } 57 | $replacement = $matches[1] . $class_attr . 'src="' . plugins_url('/images/grey.gif', __FILE__) . '" data-original' . substr($matches[2], 3) . $matches[3]; 58 | 59 | // add "lazy" class to existing class attribute 60 | $replacement = preg_replace('/class\s*=\s*"/i', 'class="lazy ', $replacement); 61 | 62 | // add noscript fallback with original img tag inside 63 | $replacement .= ''; 64 | return $replacement; 65 | } 66 | 67 | function action_footer() { 68 | if (!$this->do_footer) { 69 | return; 70 | } 71 | 72 | echo << 74 | (function($){ 75 | $("img.lazy").show().lazyload({effect: "fadeIn"}); 76 | })(jQuery); 77 | 78 | 79 | EOF; 80 | } 81 | } 82 | 83 | new jQueryLazyLoad(); 84 | 85 | ?> 86 | -------------------------------------------------------------------------------- /js/jquery.lazyload.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Lazy Load - jQuery plugin for lazy loading images 3 | * 4 | * Copyright (c) 2007-2012 Mika Tuupola 5 | * 6 | * Licensed under the MIT license: 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * 9 | * Project home: 10 | * http://www.appelsiini.net/projects/lazyload 11 | * 12 | * Version: 1.7.2 13 | * 14 | */ 15 | (function(a,b){$window=a(b),a.fn.lazyload=function(c){function f(){var b=0;d.each(function(){var c=a(this);if(e.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,e)&&!a.leftofbegin(this,e))if(!a.belowthefold(this,e)&&!a.rightoffold(this,e))c.trigger("appear");else if(++b>e.failure_limit)return!1})}var d=this,e={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return c&&(undefined!==c.failurelimit&&(c.failure_limit=c.failurelimit,delete c.failurelimit),undefined!==c.effectspeed&&(c.effect_speed=c.effectspeed,delete c.effectspeed),a.extend(e,c)),$container=e.container===undefined||e.container===b?$window:a(e.container),0===e.event.indexOf("scroll")&&$container.bind(e.event,function(a){return f()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(e.appear){var f=d.length;e.appear.call(b,f,e)}a("").bind("load",function(){c.hide().attr("src",c.data(e.data_attribute))[e.effect](e.effect_speed),b.loaded=!0;var f=a.grep(d,function(a){return!a.loaded});d=a(f);if(e.load){var g=d.length;e.load.call(b,g,e)}}).attr("src",c.data(e.data_attribute))}}),0!==e.event.indexOf("scroll")&&c.bind(e.event,function(a){b.loaded||c.trigger("appear")})}),$window.bind("resize",function(a){f()}),f(),this},a.belowthefold=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.height()+$window.scrollTop():e=$container.offset().top+$container.height(),e<=a(c).offset().top-d.threshold},a.rightoffold=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.width()+$window.scrollLeft():e=$container.offset().left+$container.width(),e<=a(c).offset().left-d.threshold},a.abovethetop=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.scrollTop():e=$container.offset().top,e>=a(c).offset().top+d.threshold+a(c).height()},a.leftofbegin=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.scrollLeft():e=$container.offset().left,e>=a(c).offset().left+d.threshold+a(c).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:b})},"above-the-top":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-screen":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-screen":function(c){return!a.rightoffold(c,{threshold:0,container:b})},"in-viewport":function(c){return!a.inviewport(c,{threshold:0,container:b})},"above-the-fold":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:b})}})})(jQuery,window) 16 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === jQuery Image Lazy Load WP === 2 | Contributors: ayn, jtai 3 | Tags: images, jquery, javascript, optimization 4 | Requires at least: 2.8 5 | Tested up to: 4.0 6 | Stable tag: 0.21 7 | 8 | add jquery lazy loading to images 9 | 10 | == Description == 11 | 12 | add lazy loading to WP, more info at http://plugins.jquery.com/project/lazyload 13 | 14 | == Installation == 15 | 16 | unzip archive to wp-content/plugins directory, and activate it in Plugins page in wp-admin 17 | 18 | or you can cd into your wordpress_root/wp-contents/plugins and do: 19 | 20 | git clone git://github.com/ayn/wp-jquery-lazy-load.git 21 | 22 | == Changelog == 23 | 24 |
  • view commit • Not filtering the content if is_feed()
    • 25 |
  • view commit • tested up to WP 3.5.1
    • 26 |
  • view commit • bump stable tag
    • 27 |
  • view commit • bumped version
    • 28 |
  • view commit • automatically add required css to the page
    • 29 |
  • view commit • update readme
    • 30 |
  • view commit • rewrite plugin to support newer jquery_lazyload (1.7.1) which requires HTML changes
    • 31 |
  • view commit • themes don't always have .post around posts, imma stop messing with this for now
    • 32 |
  • view commit • themes don't always have .post around posts, imma stop messing with this for now
    • 33 |
  • view commit • oops
    • 34 |
  • view commit • better exclusion
    • 35 |
  • view commit • ignoring images in cycle class
    • 36 |
  • view commit • bumped jquery version
    • 37 |
  • view commit • not lazyloading on iPad
    • 38 |
  • view commit • 0.9
    • 39 |
  • view commit • works in 2.9.2 (my blog at least)
    • 40 |
  • view commit • bumped version
    • 41 |
  • view commit • updated both jquery to 1.4.2, pulling from Google CDN, updated lazy load to 1.5.0
    • 42 |
  • view commit • forgot to bump version in readme
    • 43 |
  • view commit • bump version
    • 44 |
  • view commit • bump version
    • 45 |
  • view commit • merged
    • 46 |
  • view commit • changed '$' to 'jQuery' in case some other parts of WP registered jQuery with noConflict turned on.
    • 47 |
  • view commit • git svn sucks
    • 48 |
  • view commit • git svn sucks
    • 49 |
  • view commit • missing a forward slash
    • 50 |
  • view commit • fixed problem with plugin url when installing with zipfile, now only works with 2.8+ as plugins_url takes an extra param in 2.8+ to make my life easier
    • 51 |
  • view commit • svn sucks
    • 52 |
  • view commit • svn sucks
    • 53 |
  • view commit • stable tag fail
    • 54 |
  • view commit • stable tag fail
    • 55 |
  • view commit • bump version
    • 56 |
  • view commit • bump version
    • 57 |
  • view commit • bump version
    • 58 |
  • view commit • header changes
    • 59 |
  • view commit • header changes
    • 60 |
  • view commit • add git clone instructions to readme
    • 61 |
  • view commit • fixed path
    • 62 |
  • view commit • quick wp plugin to get image lazy load with @tuupola's awesome plugin
    • 63 |
  • view commit • adding jquery-image-lazy-loading by ayn
    • 64 |
  • view commit • add git clone instructions to readme
    • 65 |
  • view commit • fixed path
    • 66 |
  • view commit • quick wp plugin to get image lazy load with @tuupola's awesome plugin
    • 67 | --------------------------------------------------------------------------------