Defer background images

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.

<script>$(function(){
  $('[data-bg]').each(function(){
    var bg = $(this).data('bg');
    $(this).css('background-image','url(' + bg + ')');
  });
});</script>

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.