BJ Lazy Load - Version 0.1

Version Description

Download this release

Release Info

Developer bjornjohansen
Plugin Icon 128x128 BJ Lazy Load
Version 0.1
Comparing to
See all releases

Version 0.1

Files changed (5) hide show
  1. bj-lazyload.php +88 -0
  2. img/placeholder.gif +0 -0
  3. js/bjll.js +3 -0
  4. js/jail.min.js +9 -0
  5. readme.txt +49 -0
bj-lazyload.php ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /*
3
+ Plugin Name: BJ Lazy Load
4
+ Plugin URI: http://wordpress.org/extend/plugins/bj-lazy-load/
5
+ Description: Lazy image loading makes your site load faster and saves bandwidth.
6
+ Version: 0.1
7
+ Author: Bjørn Johansen
8
+ Author URI: http://twitter.com/bjornjohansen
9
+ License: GPL2
10
+
11
+ Copyright 2011 Bjørn Johansen (email : post@bjornjohansen.no)
12
+
13
+ This program is free software; you can redistribute it and/or modify
14
+ it under the terms of the GNU General Public License, version 2, as
15
+ published by the Free Software Foundation.
16
+
17
+ This program is distributed in the hope that it will be useful,
18
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
19
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
20
+ GNU General Public License for more details.
21
+
22
+ You should have received a copy of the GNU General Public License
23
+ along with this program; if not, write to the Free Software
24
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
25
+
26
+ */
27
+
28
+
29
+ class BJLL {
30
+
31
+ function enqueue_scripts() {
32
+ wp_enqueue_script('JAIL', plugins_url('/js/jail.min.js', __FILE__), array('jquery'), '0.9.7', true);
33
+
34
+ wp_enqueue_script( 'BJLL', plugins_url('/js/bjll.js', __FILE__), array( 'jquery', 'JAIL' ), '0.1', true );
35
+
36
+ /* We don't need this (yet)
37
+ wp_localize_script( 'BJLL', 'BJLL', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
38
+ */
39
+ }
40
+
41
+ function get_images_json() {
42
+ echo json_encode($_POST['attachmentIDs']);
43
+ exit;
44
+ }
45
+
46
+ function filter_post_images($content) {
47
+
48
+ $placeholder_url = plugins_url('/img/placeholder.gif', __FILE__);
49
+
50
+ $matches = array();
51
+ preg_match_all('/<img\s+.*?>/', $content, $matches);
52
+
53
+ $search = array();
54
+ $replace = array();
55
+
56
+ foreach ($matches[0] as $imgHTML) {
57
+ $replaceHTML = $imgHTML;
58
+
59
+ // replace the src and add the data-href attribute
60
+ $replaceHTML = preg_replace( '/<img(.*?)src=/i', '<img$1src="'.$placeholder_url.'" data-href=', $replaceHTML );
61
+
62
+ // add the lazy class to the img element
63
+ if (preg_match('/class="/i', $replaceHTML)) {
64
+ $replaceHTML = preg_replace('/class="(.*?)"/i', ' class="lazy $1"', $replaceHTML);
65
+ } else {
66
+ $replaceHTML = preg_replace('/<img/i', '<img class="lazy"', $replaceHTML);
67
+ }
68
+
69
+ $replaceHTML .= '<noscript>' . $imgHTML . '</noscript>';
70
+
71
+ array_push($search, $imgHTML);
72
+ array_push($replace, $replaceHTML);
73
+ }
74
+
75
+ $content = str_replace($search, $replace, $content);
76
+
77
+ return $content;
78
+ }
79
+
80
+ }
81
+
82
+ add_action('wp_enqueue_scripts', array('BJLL', 'enqueue_scripts'));
83
+
84
+ add_action( 'wp_ajax_BJLL_get_images', array('BJLL', 'get_images_json') );
85
+ add_action( 'wp_ajax_nopriv_BJLL_get_images', array('BJLL', 'get_images_json') );
86
+
87
+ add_filter('the_content', array('BJLL', 'filter_post_images'), 200);
88
+
img/placeholder.gif ADDED
Binary file
js/bjll.js ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ (function($) {
2
+ jQuery('img.lazy').jail();
3
+ })(jQuery);
js/jail.min.js ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
1
+ /*
2
+ * JqueryAsynchImageLoader (JAIL) : plugin for jQuery
3
+ *
4
+ * Developed by
5
+ * Sebastiano Armeli-Battana (@sebarmeli) - http://www.sebastianoarmelibattana.com
6
+ * Dual licensed under the MIT or GPL Version 3 licenses.
7
+ * @version 0.9.7
8
+ */
9
+ ;(function(a){var b=a(window);a.fn.asynchImageLoader=a.fn.jail=function(d){d=a.extend({timeout:10,effect:false,speed:400,selector:null,offset:0,event:"load+scroll",callback:jQuery.noop,callbackAfterEachImage:jQuery.noop,placeholder:false,ignoreHiddenImages:false},d);var c=this;a.jail.initialStack=this;this.data("triggerEl",(d.selector)?a(d.selector):b);if(d.placeholder!==false){c.each(function(){a(this).attr("src",d.placeholder);});}if(/^load/.test(d.event)){a.asynchImageLoader.later.call(this,d);}else{a.asynchImageLoader.onEvent.call(this,d,c);}return this;};a.asynchImageLoader=a.jail={_purgeStack:function(c){var d=0;while(true){if(d===c.length){break;}else{if(c[d].getAttribute("data-href")){d++;}else{c.splice(d,1);}}}},_loadOnEvent:function(g){var f=a(this),d=g.data.options,c=g.data.images;a.asynchImageLoader._loadImageIfVisible(d,f);f.unbind(d.event,a.asynchImageLoader._loadOnEvent);a.asynchImageLoader._purgeStack(c);if(!!d.callback){a.asynchImageLoader._purgeStack(a.jail.initialStack);a.asynchImageLoader._launchCallback(a.jail.initialStack,d);}},_bufferedEventListener:function(g){var c=g.data.images,d=g.data.options,f=c.data("triggerEl");clearTimeout(c.data("poller"));c.data("poller",setTimeout(function(){c.each(function e(){a.asynchImageLoader._loadImageIfVisible(d,this,f);});a.asynchImageLoader._purgeStack(c);if(!!d.callback){a.asynchImageLoader._purgeStack(a.jail.initialStack);a.asynchImageLoader._launchCallback(a.jail.initialStack,d);}},d.timeout));},onEvent:function(d,c){c=c||this;if(d.event==="scroll"||d.selector){var e=c.data("triggerEl");if(c.length>0){e.bind(d.event,{images:c,options:d},a.asynchImageLoader._bufferedEventListener);if(d.event==="scroll"||!d.selector){b.resize({images:c,options:d},a.asynchImageLoader._bufferedEventListener);}return;}else{if(!!e){e.unbind(d.event,a.asynchImageLoader._bufferedEventListener);}}}else{c.bind(d.event,{options:d,images:c},a.asynchImageLoader._loadOnEvent);}},later:function(d){var c=this;if(d.event==="load"){c.each(function(){a.asynchImageLoader._loadImageIfVisible(d,this,c.data("triggerEl"));});}a.asynchImageLoader._purgeStack(c);a.asynchImageLoader._launchCallback(c,d);setTimeout(function(){if(d.event==="load"){c.each(function(){a.asynchImageLoader._loadImage(d,a(this));});}else{c.each(function(){a.asynchImageLoader._loadImageIfVisible(d,this,c.data("triggerEl"));});}a.asynchImageLoader._purgeStack(c);a.asynchImageLoader._launchCallback(c,d);if(d.event==="load+scroll"){d.event="scroll";a.asynchImageLoader.onEvent(d,c);}},d.timeout);},_launchCallback:function(c,d){if(c.length===0&&!a.jail.isCallback){d.callback.call(this,d);a.jail.isCallback=true;}},_loadImageIfVisible:function(e,h,g){var f=a(h),d=(/scroll/i.test(e.event))?g:b,c=true;if(e.ignoreHiddenImages){c=a.jail._isVisibleInOverflownContainer(f,e)&&f.is(":visible");}if(c&&a.asynchImageLoader._isInTheScreen(d,f,e.offset)){a.asynchImageLoader._loadImage(e,f);}},_isInTheScreen:function(j,c,h){var f=j[0]===window,n=(f?{top:0,left:0}:j.offset()),g=n.top+(f?j.scrollTop():0),i=n.left+(f?j.scrollLeft():0),e=i+j.width(),k=g+j.height(),m=c.offset(),l=c.width(),d=c.height();return(g-h)<=(m.top+d)&&(k+h)>=m.top&&(i-h)<=(m.left+l)&&(e+h)>=m.left;},_loadImage:function(c,d){d.hide();d.attr("src",d.attr("data-href"));d.removeAttr("data-href");if(c.effect){if(c.speed){d[c.effect](c.speed);}else{d[c.effect]();}}else{d.show();}c.callbackAfterEachImage.call(this,d,c);},_isVisibleInOverflownContainer:function(e,d){var f=e.parent(),c=true;while(f.get(0).tagName!=="BODY"){if(f.css("overflow")==="hidden"){if(!a.jail._isInTheScreen(f,e,d.offset)){c=false;break;}}if(f.css("visibility")==="hidden"||e.css("visibility")==="hidden"){c=false;break;}f=f.parent();}return c;}};}(jQuery));
readme.txt ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === BJ Lazy Load ===
2
+ Contributors: bjornjohansen
3
+ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NLUWR4SHCJRBJ
4
+ Tags: images, lazy loading, jquery, javascript, optimize, performance, bandwidth
5
+ Author URI: http://twitter.com/bjornjohansen
6
+ Requires at least: 3.2
7
+ Tested up to: 3.3
8
+ Stable tag: 0.1
9
+
10
+ Lazy image loading makes your site load faster and saves bandwidth. Uses jQuery and degrades gracefully for non-js users.
11
+
12
+ == Description ==
13
+ Lazy image loading makes your site load faster and saves bandwidth.
14
+
15
+ This plugin replaces all your post images with a placeholder and loads images as they enter the browser window.
16
+
17
+ Non-javascript visitors gets the original img element in noscript.
18
+
19
+ Contains [JqueryAsynchImageLoader Plugin for jQuery by Sebastiano Armeli-Battana](http://www.sebastianoarmelibattana.com/projects/jail)
20
+
21
+ = Coming soon =
22
+ * More options like defining a threshold, loading effects, custom placeholder etc.
23
+ * Serving size optimized images for responsive layouts/adaptive designs
24
+ * (Got more ideas? Tell me!)
25
+
26
+ == Installation ==
27
+ 1. Download and unzip plugin
28
+ 2. Upload the 'bj-lazyload' folder to the '/wp-content/plugins/' directory,
29
+ 3. Activate the plugin through the 'Plugins' menu in WordPress.
30
+
31
+ == Frequently Asked Questions ==
32
+
33
+ = Whoa, this plugin is using Javascript. What about visitors without JS? =
34
+ No worries. They get the original image in a noscript element.
35
+
36
+ = I'm using a CDN. Will this plugin interfere? =
37
+ Nope. The image will load from your CDN.
38
+
39
+ = The plugin doesn't work/doesn't replace my images =
40
+ Your HTML should be standards compliant.
41
+
42
+ = How can I verify that the plugin is working? =
43
+ Check your HTML source or see the magic at work in FireBug or similar.
44
+
45
+ == Changelog ==
46
+
47
+ = Version 0.1 =
48
+ * Released 2011-12-05
49
+ * It works (or at least it does for me)