Jump to content
  • All Servicing

Sign in to follow this  

Defer background images

Recommended Posts


Plugin developers often use loading images directly into the html template, for example:

<div class="ipsType_developer class" style="padding-bottom: {{developer code}%{{else}}xx%{{endif}};
background-image:url('{{developer code}');{{endif}}">

This solution works very well, but the presence of many images that load, provides a delay in loading a site.

Lazy loading accelerates speed site, but this method has many disadvantages and I personally do not use it.

I offer you a relatively easy solution for loading background images after time "onload".

1. Edit the code listed above

<div class="ipsType_developer class" style="padding-bottom: {{developer code}%{{else}}xx%{{endif}};"
data-bg="{{developer code}{{endif}}">

2. Open the includeJS template and place the script in the template at the bottom.

    var bg = $(this).data('bg');
    $(this).css('background-image','url(' + bg + ')');

That is all. Test with online servers and make sure you speed up your site. For example, use GtMetrix and open menu Waterfall - all your background images loading after red line (onload time).

Also, PSI test stop warning your background images

Note: If you are already using a script to defer images loaded with "img src=", then read an article about combined use of defer images.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.