Title: Lazy Load
Last modified: August 21, 2016
---
# Lazy Load
* Resolved [Hernan Villanueva](https://wordpress.org/support/users/chvillanuevap/)
* (@chvillanuevap)
* [12 years, 7 months ago](https://wordpress.org/support/topic/lazy-load-1/)
* I’m using the Lazy Load plugin by the Automattic team ([http://wordpress.org/plugins/lazy-load/](http://wordpress.org/plugins/lazy-load/)).
* The plugin overwrites the HTML of my pages.
* For example, an image initially would look like this:
* ```
```
* The plugin uses the jQuery sonar plugin to replace the src attribute in the img
tag with the data-lazy-src attribute using JavaScript once the image is visible
in the viewport. If the client has no JavaScript enabled, the 1×1.trans.gif image
is not replaced, and the tag is used instead.
* When I use this plugin in combination with WP Retina 2x, I get the following:
* ```
```
* Notice the WP Retina 2x plugin has overwritten the img tag inside the noscript
tag, which is of no use. This happens when the Server-side HTML srcset method
is used.
* With Retina.js seems to work fine:
* ```
```
* The @2x does not show up inside the tag but that should not matter.
* Any ideas how I could fix this? I think the plugin is great and I would love
to be able to use it with the Server-side method.
* [http://wordpress.org/plugins/wp-retina-2x/](http://wordpress.org/plugins/wp-retina-2x/)
Viewing 3 replies - 1 through 3 (of 3 total)
* Thread Starter [Hernan Villanueva](https://wordpress.org/support/users/chvillanuevap/)
* (@chvillanuevap)
* [12 years, 7 months ago](https://wordpress.org/support/topic/lazy-load-1/#post-4325454)
* Ok, I think I figured out what is going on.
* The Lazy Load plugins hooks itself to:
* ```
add_filter( 'the_content', array( __CLASS__, 'add_image_placeholders' ), 99 );
```
* and happens before WP Retina 2x’s hook:
* ```
add_action( 'wp_head', 'wr2x_srcset_buffer_start' );
```
* Let’s say we have an image as follows:
* ```
```
* Your plugin now comes along and looks for all the src attributes in all , which has the
correct src pointing to the actual image, and it is able to locate the @2x image.
However, this is of no use since our goal is to include the correct path in the
first
```
* I was able to get it to work with the following hack in wp-retina-2x.php:
* ```
$img_info = parse_url( $tag->getAttribute('data-lazy-src') );
```
* so now my HTML looks initially like:
* ```
```
* and once it is loaded:
* ```
```
* The tag does not have the srcset attribute, which is okay because
I’m working on the assumption that if you are using a Retina-ready device, you
have JavaScript enabled. However, now only the images with the data-lazy-src
attribute are Retina ready, which are only the images inside the content of the
post.
* This hack is not a recommended nor a permanent solution though. The issue with
this Lazy Load plugin is that it needs to load after your plugin has worked its
magic for all to display correctly. Since one hooks to the_content filter and
the other to the wp_head action, it seems unlikely this is possible.
* At the same time, using the srcset attribute would overwrite the src with the
transparent gif image placeholder, completely killing the purpose of lazy loading.
I am going to put some thought into this issue. Let me know if you have any ideas
and thanks again for a great plugin.
* Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/)
* (@tigroumeow)
* [12 years, 6 months ago](https://wordpress.org/support/topic/lazy-load-1/#post-4325583)
* Thanks. I have no idea right now how to avoid those issues. Maybe it would be
interesting to have Automattic point of view on this.
* Thread Starter [Hernan Villanueva](https://wordpress.org/support/users/chvillanuevap/)
* (@chvillanuevap)
* [12 years, 6 months ago](https://wordpress.org/support/topic/lazy-load-1/#post-4325585)
* I haven’t had any time to think more about this issue. I’m going to close this
thread for now, at least until more browsers support the srcset attribute.
* Thanks again for a great plugin!
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘Lazy Load’ is closed to new replies.
* 
* [Perfect Images: Regenerate Thumbnails, Image Sizes, WebP & AVIF](https://wordpress.org/plugins/wp-retina-2x/)
* [Frequently Asked Questions](https://wordpress.org/plugins/wp-retina-2x/#faq)
* [Support Threads](https://wordpress.org/support/plugin/wp-retina-2x/)
* [Active Topics](https://wordpress.org/support/plugin/wp-retina-2x/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/wp-retina-2x/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/wp-retina-2x/reviews/)
## Tags
* [server-side](https://wordpress.org/support/topic-tag/server-side/)
* 3 replies
* 2 participants
* Last reply from: [Hernan Villanueva](https://wordpress.org/support/users/chvillanuevap/)
* Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/lazy-load-1/#post-4325585)
* Status: resolved 
```
* The plugin uses the jQuery sonar plugin to replace the src attribute in the img
tag with the data-lazy-src attribute using JavaScript once the image is visible
in the viewport. If the client has no JavaScript enabled, the 1×1.trans.gif image
is not replaced, and the 
