Jump to content
  • Our Picks

    Repair headsets from different manufacturers

    Repair of telephone exchanges and equipment

    Repair of intercom systems and equipment

    Remove Render-blocking CSS

    We are repairing different inverters

  • Vote for us

Defer background images


Nophelet

Recommended Posts

  • Owner

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.

Link to comment
Share on other sites

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.

×
×
  • Create New...