Version Description
- Fix lazyload_images_add_placeholders by adding missing return, props Kevin Smith
- Lazy load avatars, props i8ramin
- Don't lazy load images in the Dashboard
- Better compatibility with Jetpack Carousel
Download this release
Release Info
Developer | batmoo |
Plugin | Lazy Load |
Version | 0.5 |
Comparing to | |
See all releases |
Code changes from version 0.4 to 0.5
- js/lazy-load.js +23 -11
- lazy-load.php +11 -7
- readme.txt +8 -1
js/lazy-load.js
CHANGED
@@ -3,16 +3,28 @@
|
|
3 |
$( 'body' ).bind( 'post-load', lazy_load_init ); // Work with WP.com infinite scroll
|
4 |
|
5 |
function lazy_load_init() {
|
6 |
-
|
7 |
-
|
8 |
-
$img = jQuery(img),
|
9 |
-
src = $img.attr( 'data-lazy-src' );
|
10 |
-
$img.unbind( 'scrollin' ) // remove event binding
|
11 |
-
.hide()
|
12 |
-
.removeAttr( 'data-lazy-src' )
|
13 |
-
.attr( 'data-lazy-loaded', 'true' );;
|
14 |
-
img.src = src;
|
15 |
-
$img.fadeIn();
|
16 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
17 |
}
|
18 |
-
})(jQuery);
|
3 |
$( 'body' ).bind( 'post-load', lazy_load_init ); // Work with WP.com infinite scroll
|
4 |
|
5 |
function lazy_load_init() {
|
6 |
+
$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
|
7 |
+
lazy_load_image( this );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
});
|
9 |
+
|
10 |
+
// We need to force load gallery images in Jetpack Carousel and give up lazy-loading otherwise images don't show up correctly
|
11 |
+
$( '[data-carousel-extra]' ).each( function() {
|
12 |
+
$( this ).find( 'img[data-lazy-src]' ).each( function() {
|
13 |
+
lazy_load_image( this );
|
14 |
+
} );
|
15 |
+
} );
|
16 |
+
}
|
17 |
+
|
18 |
+
function lazy_load_image( img ) {
|
19 |
+
var $img = jQuery( img ),
|
20 |
+
src = $img.attr( 'data-lazy-src' );
|
21 |
+
|
22 |
+
$img.unbind( 'scrollin' ) // remove event binding
|
23 |
+
.hide()
|
24 |
+
.removeAttr( 'data-lazy-src' )
|
25 |
+
.attr( 'data-lazy-loaded', 'true' );
|
26 |
+
|
27 |
+
img.src = src;
|
28 |
+
$img.fadeIn();
|
29 |
}
|
30 |
+
})(jQuery);
|
lazy-load.php
CHANGED
@@ -2,7 +2,7 @@
|
|
2 |
/**
|
3 |
* Plugin Name: Lazy Load
|
4 |
* Description: Lazy load images to improve page load times. Uses jQuery.sonar to only load an image when it's visible in the viewport.
|
5 |
-
* Version: 0.
|
6 |
*
|
7 |
* Code by the WordPress.com VIP team, TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC).
|
8 |
* Uses jQuery.sonar by Dave Artz (AOL): http://www.artzstudio.com/files/jquery-boston-2010/jquery.sonar/
|
@@ -14,20 +14,24 @@ if ( ! class_exists( 'LazyLoad_Images' ) ) :
|
|
14 |
|
15 |
class LazyLoad_Images {
|
16 |
|
17 |
-
const version = '0.
|
|
|
|
|
|
|
|
|
18 |
|
19 |
-
function init() {
|
20 |
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'add_scripts' ) );
|
21 |
add_filter( 'the_content', array( __CLASS__, 'add_image_placeholders' ), 99 ); // run this later, so other content filters have run, including image_add_wh on WP.com
|
22 |
add_filter( 'post_thumbnail_html', array( __CLASS__, 'add_image_placeholders' ), 11 );
|
|
|
23 |
}
|
24 |
|
25 |
-
function add_scripts() {
|
26 |
wp_enqueue_script( 'wpcom-lazy-load-images', self::get_url( 'js/lazy-load.js' ), array( 'jquery', 'jquery-sonar' ), self::version, true );
|
27 |
wp_enqueue_script( 'jquery-sonar', self::get_url( 'js/jquery.sonar.min.js' ), array( 'jquery' ), self::version, true );
|
28 |
}
|
29 |
|
30 |
-
function add_image_placeholders( $content ) {
|
31 |
// Don't lazyload for feeds, previews, mobile
|
32 |
if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
|
33 |
return $content;
|
@@ -45,13 +49,13 @@ class LazyLoad_Images {
|
|
45 |
return $content;
|
46 |
}
|
47 |
|
48 |
-
function get_url( $path = '' ) {
|
49 |
return plugins_url( ltrim( $path, '/' ), __FILE__ );
|
50 |
}
|
51 |
}
|
52 |
|
53 |
function lazyload_images_add_placeholders( $content ) {
|
54 |
-
LazyLoad_Images::add_image_placeholders( $content );
|
55 |
}
|
56 |
|
57 |
LazyLoad_Images::init();
|
2 |
/**
|
3 |
* Plugin Name: Lazy Load
|
4 |
* Description: Lazy load images to improve page load times. Uses jQuery.sonar to only load an image when it's visible in the viewport.
|
5 |
+
* Version: 0.5
|
6 |
*
|
7 |
* Code by the WordPress.com VIP team, TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC).
|
8 |
* Uses jQuery.sonar by Dave Artz (AOL): http://www.artzstudio.com/files/jquery-boston-2010/jquery.sonar/
|
14 |
|
15 |
class LazyLoad_Images {
|
16 |
|
17 |
+
const version = '0.5';
|
18 |
+
|
19 |
+
static function init() {
|
20 |
+
if ( is_admin() )
|
21 |
+
return;
|
22 |
|
|
|
23 |
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'add_scripts' ) );
|
24 |
add_filter( 'the_content', array( __CLASS__, 'add_image_placeholders' ), 99 ); // run this later, so other content filters have run, including image_add_wh on WP.com
|
25 |
add_filter( 'post_thumbnail_html', array( __CLASS__, 'add_image_placeholders' ), 11 );
|
26 |
+
add_filter( 'get_avatar', array( __CLASS__, 'add_image_placeholders' ), 11 );
|
27 |
}
|
28 |
|
29 |
+
static function add_scripts() {
|
30 |
wp_enqueue_script( 'wpcom-lazy-load-images', self::get_url( 'js/lazy-load.js' ), array( 'jquery', 'jquery-sonar' ), self::version, true );
|
31 |
wp_enqueue_script( 'jquery-sonar', self::get_url( 'js/jquery.sonar.min.js' ), array( 'jquery' ), self::version, true );
|
32 |
}
|
33 |
|
34 |
+
static function add_image_placeholders( $content ) {
|
35 |
// Don't lazyload for feeds, previews, mobile
|
36 |
if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
|
37 |
return $content;
|
49 |
return $content;
|
50 |
}
|
51 |
|
52 |
+
static function get_url( $path = '' ) {
|
53 |
return plugins_url( ltrim( $path, '/' ), __FILE__ );
|
54 |
}
|
55 |
}
|
56 |
|
57 |
function lazyload_images_add_placeholders( $content ) {
|
58 |
+
return LazyLoad_Images::add_image_placeholders( $content );
|
59 |
}
|
60 |
|
61 |
LazyLoad_Images::init();
|
readme.txt
CHANGED
@@ -3,7 +3,7 @@ Contributors: batmoo, automattic, jakemgold, 10up
|
|
3 |
Tags: lazy load, images, front-end optimization
|
4 |
Requires at least: 3.2
|
5 |
Tested up to: 3.4.1
|
6 |
-
Stable tag: 0.
|
7 |
|
8 |
Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.
|
9 |
|
@@ -58,6 +58,13 @@ This will lazy load <em>all</em> your images.
|
|
58 |
|
59 |
== Changelog ==
|
60 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
61 |
= 0.4 =
|
62 |
|
63 |
* New helper function to lazy load non-post content
|
3 |
Tags: lazy load, images, front-end optimization
|
4 |
Requires at least: 3.2
|
5 |
Tested up to: 3.4.1
|
6 |
+
Stable tag: 0.5
|
7 |
|
8 |
Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.
|
9 |
|
58 |
|
59 |
== Changelog ==
|
60 |
|
61 |
+
= 0.5 =
|
62 |
+
|
63 |
+
* Fix lazyload_images_add_placeholders by adding missing return, props Kevin Smith
|
64 |
+
* Lazy load avatars, props i8ramin
|
65 |
+
* Don't lazy load images in the Dashboard
|
66 |
+
* Better compatibility with Jetpack Carousel
|
67 |
+
|
68 |
= 0.4 =
|
69 |
|
70 |
* New helper function to lazy load non-post content
|