Lazy Load - Version 0.4

Version Description

  • New helper function to lazy load non-post content
  • Prevent circular lazy-loading
Download this release

Release Info

Developer batmoo
Plugin Icon wp plugin Lazy Load
Version 0.4
Comparing to
See all releases

Code changes from version 0.3 to 0.4

Files changed (3) hide show
  1. js/lazy-load.js +17 -12
  2. lazy-load.php +16 -4
  3. readme.txt +39 -3
js/lazy-load.js CHANGED
@@ -1,13 +1,18 @@
1
  (function($) {
2
- $( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
3
- var img = this,
4
- $img = jQuery(img),
5
- src = $img.attr( 'data-lazy-src' );
6
- $img.unbind( 'scrollin' ) // remove event binding
7
- .hide()
8
- .removeAttr( 'data-lazy-src' )
9
- .attr( 'data-lazy-loaded', 'true' );;
10
- img.src = src;
11
- $img.fadeIn();
12
- });
13
- })(jQuery);
 
 
 
 
 
1
  (function($) {
2
+ lazy_load_init();
3
+ $( 'body' ).bind( 'post-load', lazy_load_init ); // Work with WP.com infinite scroll
4
+
5
+ function lazy_load_init() {
6
+ jQuery( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
7
+ var img = this,
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);
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.3
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/
@@ -10,13 +10,15 @@
10
  * License: GPL2
11
  */
12
 
 
 
13
  class LazyLoad_Images {
14
 
15
- const version = '0.3';
16
 
17
  function init() {
18
  add_action( 'wp_enqueue_scripts', array( __CLASS__, 'add_scripts' ) );
19
- add_filter( 'the_content', array( __CLASS__, 'add_image_placeholders' ), 11 );
20
  add_filter( 'post_thumbnail_html', array( __CLASS__, 'add_image_placeholders' ), 11 );
21
  }
22
 
@@ -30,11 +32,15 @@ class LazyLoad_Images {
30
  if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
31
  return $content;
32
 
 
 
 
 
33
  // In case you want to change the placeholder image
34
  $placeholder_image = apply_filters( 'lazyload_images_placeholder_image', self::get_url( 'images/1x1.trans.gif' ) );
35
 
36
  // This is a pretty simple regex, but it works
37
- $content = preg_replace( '#<img([^>]+?)src=[\'"]([^\'">]*)[\'"]([^>]*)>#', sprintf( '<img${1}src="%s" data-lazy-src="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content );
38
 
39
  return $content;
40
  }
@@ -44,4 +50,10 @@ class LazyLoad_Images {
44
  }
45
  }
46
 
 
 
 
 
47
  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.4
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/
10
  * License: GPL2
11
  */
12
 
13
+ if ( ! class_exists( 'LazyLoad_Images' ) ) :
14
+
15
  class LazyLoad_Images {
16
 
17
+ const version = '0.4';
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
 
32
  if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
33
  return $content;
34
 
35
+ // Don't lazy-load if the content has already been run through previously
36
+ if ( false !== strpos( $content, 'data-lazy-src' ) )
37
+ return $content;
38
+
39
  // In case you want to change the placeholder image
40
  $placeholder_image = apply_filters( 'lazyload_images_placeholder_image', self::get_url( 'images/1x1.trans.gif' ) );
41
 
42
  // This is a pretty simple regex, but it works
43
+ $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="%s" data-lazy-src="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content );
44
 
45
  return $content;
46
  }
50
  }
51
  }
52
 
53
+ function lazyload_images_add_placeholders( $content ) {
54
+ LazyLoad_Images::add_image_placeholders( $content );
55
+ }
56
+
57
  LazyLoad_Images::init();
58
+
59
+ endif;
readme.txt CHANGED
@@ -1,9 +1,9 @@
1
  === Lazy Load ===
2
- Contributors: batmoo, automattic, jakemgold, get10up
3
  Tags: lazy load, images, front-end optimization
4
  Requires at least: 3.2
5
- Tested up to: 3.3
6
- Stable tag: 0.3
7
 
8
  Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.
9
 
@@ -25,8 +25,44 @@ Uses <a href="http://www.artzstudio.com/files/jquery-boston-2010/jquery.sonar/ "
25
 
26
  No applicable screenshots
27
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  == Changelog ==
29
 
 
 
 
 
 
30
  = 0.3 =
31
 
32
  * Make LazyLoad a static class so that it's easier to change its hooks
1
  === Lazy Load ===
2
+ 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.4
7
 
8
  Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.
9
 
25
 
26
  No applicable screenshots
27
 
28
+ == Frequently Asked Questions ==
29
+
30
+ = How do I change the placeholder image =
31
+
32
+ `
33
+ add_filter( 'lazyload_images_placeholder_image', 'my_custom_lazyload_placeholder_image' );
34
+ function my_custom_lazyload_placeholder_image( $image ) {
35
+ return 'http://url/to/image';
36
+ }
37
+ `
38
+
39
+ = How do I lazy load other images in my theme? =
40
+
41
+ You can use the lazyload_images_add_placeholders helper function:
42
+
43
+ `
44
+ if ( function_exists( 'lazyload_images_add_placeholders' ) )
45
+ $content = lazyload_images_add_placeholders( $content );
46
+ `
47
+
48
+ Or, you can add an attribute called "data-lazy-src" with the source of the image URL and set the actual image URL to a transparent 1x1 pixel.
49
+
50
+ You can also use output buffering, though this isn't recommended:
51
+
52
+ `
53
+ if ( function_exists( 'lazyload_images_add_placeholders' ) )
54
+ ob_start( 'lazyload_images_add_placeholders' );
55
+ `
56
+
57
+ 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
64
+ * Prevent circular lazy-loading
65
+
66
  = 0.3 =
67
 
68
  * Make LazyLoad a static class so that it's easier to change its hooks