Top Poster
#1 ramon fincken 398
#2 Site admin 3
#3 Ber|Art 2
#4 braddmark 1
#5 accentmedia 1
#6 Xarzu 1
#7 pEcosespedex 1
#8 khadish 1
#9 moxxx 1
#10 nistelrock 1
[solution] WordPress a3 Lazy Load plugin Background image inline



Rating : 3 / 5

 
Post new topic   Reply to topic    Ramonfincken.com Forum Index -> CMS-ses (Joomla, WordPress, etc..)
Beta
Want to be notified by email when this topic gets a reply?  
View previous topic  
Author Message
ramon fincken
Site's programmer

Get a free globally recognized avatar
It's free!


Joined: 03 Aug 2007
Posts: 398
Location: A'dam/Diemen, The Netherlands

PostPosted: Tue Jun 18, 2019 11:25 am    Post subject: [solution] WordPress a3 Lazy Load plugin Background image inline Reply with quote

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"




done!
Back to top
View user's profile Send private message Visit poster's website
Google adsense
Advertisement





PostPosted: Tue Jun 18, 2019 11:25 am    Post subject: [solution] WordPress a3 Lazy Load plugin Background image inline

Advertisement
Back to top
GravityForms
Advertisement





PostPosted: Tue Jun 18, 2019 11:25 am    Post subject: [solution] WordPress a3 Lazy Load plugin Background image inline

Advertisement
Gravity Forms Plugin for WordPress
Back to top
Post new topic   Reply to topic    Ramonfincken.com Forum Index -> CMS-ses (Joomla, WordPress, etc..) All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
General forums
The world of freelance
Programming
Other projects
Poll
I love gifts

Yes goodies and presents! [3]
No but I love polls ! [1]

Related google ads