Version Description
Download this release
Release Info
Developer | bjornjohansen |
Plugin | BJ Lazy Load |
Version | 0.1 |
Comparing to | |
See all releases |
Version 0.1
- bj-lazyload.php +88 -0
- img/placeholder.gif +0 -0
- js/bjll.js +3 -0
- js/jail.min.js +9 -0
- 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)
|