angrycreative/bj-lazy-load

WordPress plugin for lazy loading

BJ Lazy Load

BJ Lazy Load is a WordPress plugin that improves site loading times by lazy loading images and iframes. The plugin is available through the plugin repository on wordpress.org.

Lazy loading makes your site load faster and saves bandwidth.

This plugin replaces all your post images, post thumbnails, gravatar images and content iframes with a placeholder and loads the content as it gets close to enter the browser window when the visitor scrolls the page. Also works with text widgets.

Since it works with iframes, it also covers embedded videoes from YouTube, Vimeo etc.

You can also lazy load other images and iframes in your theme, by using a simple filter.

Non-javascript visitors gets the original element in noscript.

Project setup

You will need npm to build the plugin.

git clone --recurse-submodules git+ssh://[email protected]/Angrycreative/bj-lazy-load.git
cd bj-lazy-load
npm i
gulp

Linting the code

PHP linting requires PHP Codesniffer to be installed.

# lint everything
npm run lint

# lint only PHP or only JavaScript
npm run lint:php
npm run lint:js

bj-lazy-load's Issues

Incorrect behaviour of exclusion classes with HTML filter

Hi,

I just discovered that filter apply_filters( 'bj_lazy_load_html', $content ) (used in add_filter( 'the_content', 'function' );) behaves incorrectly.

1. When I would to exclude image (because it's slider's lazyloading), the default no-lazy class takes no effect, so I have doubled noscript tag and broken image src.
2. When I set any image the no-lazy class in post's editor (by Insert Media), the whole images on the page are no lazyloaded.

I think that problem begins in _get_content_haystack in bj-lazy-load\inc\class-bjll.php, but I have no idea how to fix it.

Greetings

Issue on loading content on www.marcoborla.it - Blank image on loading…

Hi,
I hope the issue can be solved soon. This plug-in is great and are working fine on my other two website
https://www.peopleinside.it and https://blog.peopleinside.it

BUT is not working well on http://www.marcoborla.it
as is showing a blank image on the loading also if I select the options to Use low-res preview image.

I created a WordPress support topic here:
https://wordpress.org/support/topic/blank-image-on-loading/

During the loading process the website is showed badly:

after the load process is showed correctly:

I also tried to put a custom image loading but this will not work because if in the homepage all content are loaded if I clock on blog with custom loading image will be showed loading image instead images and videos.

Loading images twice when element.top is 0

In a custom WP installation where LayGridder plugin is used to display grids with images, somehow on any event triggered (load,scroll,resize) all the images were loaded twice - one time with element.top equal to 0 (thus triggering all of them to be loaded at once) and second time with actual distance from the top (not triggering load on any not in the viewport).

My simple solution was to change the code to (adding a check if elemRect.top>0):
if ( winH - elemRect.top + BJLL.threshold > 0 && elemRect.top>0 ) { BJLL.show( el ); updated = true; }

May not be an issue for everybody, but good to know.

Fix matching of HTML attributes in filter_images()

The code used to replace srcset and sizes attributes is overly simple and can cause issues like replacing parts of the src or other unrelated attributes:

// also replace the srcset (responsive images)
$replaceHTML = str_replace( 'srcset', 'data-lazy-srcset', $replaceHTML );
// replace sizes to avoid w3c errors for missing srcset
$replaceHTML = str_replace( 'sizes', 'data-lazy-sizes', $replaceHTML );

To fix this, we need to implement a proper parsing of the HTML tag and its attributes.

The issue was reported on wordpress.org: https://wordpress.org/support/topic/broken-image-10/

Filter ‘bj_lazy_load_html’ not working

I applied the filter 'bj_lazy_load_html' to an img element in the footer.php template.
I can see that in the source code the image contains the 'data-src' attribute but it loads when the page loads the instead of lazy loading when scroll down.

Any suggestions about how to fix this.

Thanks.

• [ ]

Breaks image with 'sizes' in its name

This line breaks image with word sizes in its name:

bj-lazy-load/inc/class-bjll.php

Line 219 in c8146b7

$replaceHTML = str_replace( 'sizes', 'data-lazy-sizes', $replaceHTML );

social-media-image-sizes_700x350.jpg -> social-media-image-data-lazy-sizes_700x350.jpg

update tested versions for WP repo

currently the “tested up to” is version 4.9, which is causing various errors and false flags as being outdated.

can the dot org repository files be updated to reflect the current versions?

add lazy load to width , not only height

on file js.

---

	var winH = document.documentElement.clientHeight || body.clientHeight;
	**var winW = document.documentElement.clientWidth  || body.clientWidth**;

	var updated = false;

	var els = document.getElementsByClassName('lazy-hidden');
	[].forEach.call( els, function( el, index, array ) {

		var elemRect = el.getBoundingClientRect();

		if ( **winW - elemRect.left + BJLL.threshold > 0 &&** winH - elemRect.top + BJLL.threshold > 0 ) {
			BJLL.show( el );
			updated = true;
		}

---

Request: Fade In?

BJ Lazy Load works great, but was hoping there was a way I can script in the ability to fade-in the images, as right now it just pops them in.

Also, the images already in the frame don't appear until scrolling takes place. Is there a way to check on load what's in the window area and show them? Right now it will just be blank until scrolling takes place.

Cheers
Ryan

Is there a way to make a particular page not lazy load?

Hello!
I would like to disable bj lazy load for particular image. I've tried all tricks what mentioned in WordPress plugin support:

1. https://wordpress.org/support/topic/option-to-disable-bj-lazy-load-on-external-loaded-images
2. https://wordpress.org/support/topic/plugin-bj-lazy-load-is-there-a-way-to-make-a-particular-page-not-lazy-load
   . . .

Please help, advice and resolve this issue.
Thank you!

Do not want to lazy load images above the fold

Hi,

Is there any way I can automatically skip above the fold images from being lazy loaded ? I have a page which displays lot of WooCommerce products. All images are getting the lazy load class. I want that above the fold image shoi;d not get lazy loaded. Also I noticed that lazy loading is not working on WooCommerce single product page. Is this a bug ?

Rewrite filtering logic using the DOM extension (instead of regular expressions)

Trying to parse HTML with regular expressions is cumbersome, error-prone and ultimately futile.
A safer (and potentially more efficient) approach would be to use the DOM extension instead.

The DOM extension is not a hard requirement for running WordPress - based on a brief look into the code, all calls to DOM extension functionality in the WP core seem to be guarded with class_exists() checks to prevent errors. However, the extension is enabled in PHP by default (see here), and is listed as a required module for WordPress in the WP Extension Check command for WP-CLI.

The following would be necessary to move to the DOM extension:

• (optional) Implement a performance check for the filter_*() functions (to get a before/after comparison)
• Re-implement the filter_*() functions using the DOM extension
• Add a check to the plugin that disables all functionality and shows a warning if the DOM extension is not active

Lazy loading in footer and sidebar

I need to have lazy loading of images and iframes in footer and sidebar. But this plugin works only in post content. How to make it work out of post content?

Compatibility with BadgeOS

I am using BJ Lazy Load (v1.0.6) and when I tried to activate BadgeOS, I received following error:

Fatal error: Cannot redeclare class BJLL_AdminPage in /{site-address}/wp-content/plugins/bj-lazy-load/inc/class-bjll-adminpage.php on line 77

After further digging out I found that both use some copies of https://github.com/scribu/wp-scb-framework and for some reason, it seems like the BJLL class is being loaded twice somehow.

Wrapping the class in question in if ( ! class_exists( 'BJLL_AdminPage' ) ) { ... } helped with my local install.

Regrading the SCB Framework part, I don't know about it enough to debug why it's happening.

Can we have this change in future release?

Adding filter for custom themed site

Sorry for the easy question, but how would I add the PHP code so that this works with a custom theme?

Bug in image uploader for WP gallery

BJ Lazy Load is throwing a PHP error when I go to the "Media Library" tab to upload images into a gallery post. This error results in no content appearing in the Media Library at this location.

This is the error (redacted):

PHP Fatal error: Cannot redeclare bjll_compat_wptouch() (previously declared in /path/to/mysite/public_html/wp-content/plugins/bj-lazy-load/inc/compat/wptouch.php:4) in /path/to/mysite/public_html/wp-content/plugins/bj-lazy-load/inc/compat/wptouch.php on line 4, referer: https://mysite.com/wp-admin/media-upload.php?post_id=0&type=image&tab=type_url

Add support for HTML5 <picture> tag

The plugin currently processes <picture> tags incompletely.

For example, the following code:

<picture>
  <source srcset="img.png.webp" type="image/webp">
  <source srcset="img.png">
  <img src="img.png" srcset="img.png">
</picture>

...is transformed to:

<picture class="lazy lazy-hidden" data-lazy-type="image">
  <source data-lazy-srcset="img.png.webp" type="image/webp">
  <source data-lazy-srcset="img.png">
  <img data-lazy-src="img.png" class="lazy lazy-hidden" data-lazy-type="image" srcset="img.png">
</picture>

...which becomes the following after activation in the browser:

<picture class="lazy" data-lazy-type="image" src="null">
  <source data-lazy-srcset="img.png.webp" type="image/webp">
  <source data-lazy-srcset="img.png">
  <img data-lazy-src="img.png" class="lazy lazy-loaded" data-lazy-type="image" srcset="img.png" src="img.png">
</picture>

This essentially reduces the functionality of the <picture> tag to a basic <img>.

Disable for Print not working

I noticed in Version 0.6.4 you added the feature of disabling when printing. For some reason, when I print preview in both Chrome and Firefox, only the images that have been loaded already in the browser show up in the preview.

By adding a class of 'no-lazy' to the first image on the page, it somehow fixes the issue and all images on the page show in the print preview.

Here's an example of a page that does not have no-lazy applied: https://placesjournal.org/article/camp-code/
And here's one that does: https://placesjournal.org/article/multilevel-metropolis-urban-skyways/

I'm sure it could be something conflicting on my end but I thought I would ask here if you had seen the issue before.

Thanks!

A few of the things I hope to look at

Hi Bjørn
Thanks for posting the plugin. Here are some of the things I hope to look at:

• Potentially add a few filters so its possible to serve the images from a CDN URL
• Possibly move away from the use of TimThumb - I had issues with GIF images and also it breaks occasionally. Would be nice to tie it into WordPress media library too. Could be a big job though.
• Potentially move the cache folder to /wp-content/uploads/bj-cache as we know we can always write there
• Look at adding the ability to use mod_rewrite to support cleaner URLs
• Is foresigt.js is worth integrating http://www.cdnconnect.com/docs/foresightjs ? - The bandwidth detection is interesting

I cannot guarantee I will get to look at all of these but will do my best.

Exclude post thumbnails by CSS classes

As far as I understand, css class exclusions only work for images in content. It would be great if those would also be applied to post thumbnails, as I set a custom CSS class for the first post thumbnail in the loop (above fold) to be excluded from lazy loading.
This worked perfectly with a3 lazy load plugin, but unfortunately not with yours (which I like better due to being able to use low resolution preview pictures and because real image dimensions are used for placeholder images)

Tiny image sizes created

I recently found that BJ Lazy Load is creating a 30 x ~20px image size for each upload since late 2016. Is this on purpose? I can't find why this is happening or how to disable it.

Option to lazy load on window.load or idle time

It would great to have an option to which allow images to be loaded after the whole page is loaded, of X seconds after loading or idle time. It would allow images to be loaded when the user is reading above the fold, for example.

In the future, maybe even conditionally load images based on Navigator.online property and/or Network API

This could be either an option in the admin or a hook.

PS: Creating this issue to gather opinions, ideas, and to track the development/PR, which will work on next month.

Not working with NextGEN Gallery

Hello

This plugin used to work fine with NextGEN gallery, but then stopped. Not sure at which NextGEN version it stopped.
I did a "variable elimination" in case my wordpress install had something corrupt by installing a new wordpress on localhost, installing NextGen and bj-lazy-load and then upload a gallery. The gallery wouldnt lazy load.
Even though the attributes of data-lazy-srcset is getting added, it still doesnt lazy load. Everything is getting loaded at once, including the images out of frame.

Update scb framework

Hello!

Could you update the scb framework instance?

Currently we've got a conflict since our themes also includes it. Themes include version 60, plugin includes version 58.
Plugin loads its version first, theme uses it and get version incompatibility issues.

If you update the scb framework instance in the plugin to latest version we'll avoid this issue.

Thank you very much!

pictures are'nt loaded with amp plugin

Pictures are not shown with the amp-plugin by automattic ( https://de.wordpress.org/plugins/amp/)

Wrong displayed coee is
<div class="amp-wp-article-content"> <p><amp-img class="lazy lazy-hidden alignnone wp-image-1257 size-full amp-wp-enforced-sizes" src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" alt="Nice Pictrue width="1280" height="556" sizes="(min-width: 800px) 800px, 100vw"></amp-img></p><br/>

Not working with "CloudFlare Cache Everything"

I'm using BJ Lazy Load for lazy loading images on my WordPress blog and another plugin for lazyloading comments. My website is fully cached by CloudFlare. The Comments are lazy loading but the images (BJ Lazy Load) is not working.

SEO Ultimate compatibility fix and a feature request

In bj-lazy-load.php, there are these two lines:

$bjll_options = new BJLL_Options();
$bjll = new BJLL( $bjll_options );

By default, this plugin is incomatible with SEO Ultimate plugin, as stated here for example. The simple and easy fix is to delete the second line. As far as I can tell, plugin works with it disabled just fine, and incompatibility with another plugin is resolved.

I also have a feature to request to be added. This new string of code here should be applied in order to strip "http:" and "https:" from src URLs, because in certain cirumstances (site with Cloudflare Flexible SSL + HTTPS Rewrites and no own server SSL) <nosript> src and data-src URLs aren't replaced, and on image load page turns into mixed SSL.

// Strip protocol scheme from src and data-src
$replace = str_replace(['http:', 'https:'], '', $replace);

$content = str_replace( $search, $replace, $content );

I'd suggest making it a checkbox option, or let users even choose – strip both HTTP and HTTPS, replace HTTP with HTTPS or do nothing. Or maybe you could automate it somehow, idk. Either way, the best practice now is to always use HTTPS, but not everyone may be using it still obviously.

Problems with moving divs around

Hello,

first thank you for this great plugin. I have a page with a lot of divs, and each one has an image. If the divs don't change their positions, everything works ok. However, I have a dropdown to filter the items to show, and when I select a filter, the divs change their position, and some times the images don't get displayed.

Probably that repositioning makes the sonar stuff to fail. Is there anything I could do to have your plugin working in that scenario?

Thank you

Embeds with <script src> aren't lazy lazy loaded

Some embed providers use <iframe> for loading of their content, but other use plain HTML or iframe followed by <script src>. Most notable example is Twitter, but there are others like Tumblr, Vine, Instagram...

Here is a Twitter example:

<blockquote class="twitter-tweet" width="500"><p lang="en" dir="ltr">Some content...</p>&mdash; Milan Dinić (@dinicmilan) <a href="https://twitter.com/dinicmilan/status/682154806358720512">December 30, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

This means that their JavaScript file is loaded and <iframe> created while loading page and lazy loading is not working for them. In my commit dimadin/bj-lazy-load@5bf81af, I showed how this can be done for Twitter, but this is not practical because all sources must be manually defined and they can change.

What can be done is to do some regex to find script source, then replace that <script> tag with placeholder image, while JavaScript can stay the same or similar as in my commit. The only question is what to do if script has more attributes.

Other option is to put some trigger in your JavaScript file so that I don't need to edit that file after updates.

Incompatibility with AMP pages

Just making you aware, but the plugin doesn't play nicely with the new AMP plugin by WordPress: https://wordpress.org/plugins/amp/

Recommend just disabling the plugin on /amp/ output.

Images not getting loaded when accessed website via android webview or from chrome mobile view

I am working on woocommerce site. I have used this plugin for lazy load. Images gets loaded when in normal view. when i am looking the same site in responsive view using the inspect element in cheome browser. Images are not loaded when scrolled. testing link http://labs.techirsh.com/mvsstore/shop/

Use data-src instead of data-lazy-src

The plugin is currently masking HTML attributes by prefixing them with data-lazy-.

For SEO reasons, it might be better to only use the prefix data- instead:

• Yandex parses the data-src attribute directly (see here)
• Google's sample lazy loading implementation also uses this prefix, so there is a good chance this tag is also parsed by other crawlers (see here)

Plugin using some deprecated wp functions

For example, contextual_help, screen_icon, get_screen_icon
Detected in wp debug mode.

bug with srcset

there's a bug in bj-lazy-load.js lines 59, 60
data-srcset should be data-lazy-srcset. the current version doesn't work with srcset.

Support for image specific placeholders

The current implementation only supports one placeholder for all images. User experience (and Google Pagespeed scoring "above the fold" ;)) could be improved by supporting image specific placeholders. Gif placeholder 64base encoded generator for WordPress images + Lazysizes.js outlines a clever approach. Would be awesome if we could introduce this functionality to BJ Lazy Load.

Test search engine visibility by crawling without scroll events

Google recommends testing lazy load implementations with a headless browser that does not emit scroll events (see here).

We could add this as an integration test for the plugin.

plug-in does not work

I installed the plugin, but apparently it is not working. how to check? inforesist dot org

Add implementation using IntersectionObserver for detecting visible images

All modern browsers now support the IntersectionObserver interface (currently supported for ~88% of web traffic), which allows to track the visibility of page elements more efficiently than by observing scroll events.

We should make use of this new feature, but keep the old implementation as a fallback for incompatible older browsers (or use this polyfill).

References:

• Google's guide on lazy loading