Ramonfincken.com

ramon fincken

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:

Download jquery.lazyloadxt.bg.js from https://github.com/ressio/lazy-load-xt/...adxt.bg.js into yourtheme/dist/js/jquery.lazyloadxt.bg.js

Use this in your theme functions.php file

Code:

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' );
}

Convert your background HTML element URL calls like:

Code:

style="background-image: url(image_url.jpg)"

to:

Code:

data-bg="image_url.jpg"