Jump to content
  • All Servicing

    teleqremprplantniponoptimdetig
Sign in to follow this  
Nophelet

Defer background images

Recommended Posts

Nophelet

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.

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.