[solution] WordPress a3 Lazy Load plugin Background image inline

The WordPress a3 Lazy Load does not work for background images in HTML.

The lazy load javascript comes from https://github.com/ressio/lazy-load-xt

its readme shows this nice example: http://ressio.github.io/lazy-load-xt/demo/bg.htm

steps to enable background image lazy loading for WordPress:
[list:c913c560e0]
[*:c913c560e0]Download jquery.lazyloadxt.bg.js from https://github.com/ressio/lazy-load-xt/blob/master/dist/jquery.lazyloadxt.bg.js into yourtheme/dist/js/jquery.lazyloadxt.bg.js
[*:c913c560e0]Use this in your theme functions.php file
[code:1:c913c560e0]

add_action( ‘wp_enqueue_scripts’, ‘enqueue_javascripts’ );

function enqueue_javascripts() {
/**
* https://github.com/ressio/lazy-load-xt
* http://ressio.github.io/lazy-load-xt/demo/bg.htm
*/
$in_footer = true; // Overwrite any setting from a3 lazy loading
wp_register_script( ‘jquery-lazyloadxt-bg’,
get_template_directory_uri().’/dist/js/jquery.lazyloadxt.bg.js’,
array( ‘jquery’, ‘jquery-lazyloadxt’, ‘jquery-lazyloadxt-srcset’, ‘jquery-lazyloadxt-extend’ ),
A3_LAZY_VERSION,
$in_footer );
wp_enqueue_script( ‘jquery-lazyloadxt-bg’ );
}[/code:1:c913c560e0]
[*:c913c560e0]Convert your background HTML element URL calls like:
[code:1:c913c560e0]style=”background-image: url(image_url.jpg)”[/code:1:c913c560e0]
to:
[code:1:c913c560e0]data-bg=”image_url.jpg”[/code:1:c913c560e0]
[/list:u:c913c560e0]

done!