Backgrounds are not lazy loading

@stormman

Lazy Loading Background images is not possible due to the way that they are coded into the vast majority of themes – most of them I believe, the background images are not added a html tag, which is required to apply lazy load filter. For example this is how the background image would have to be added for lazy load to apply to it.

<p data-bg=“http://lorempixel.com/300/200/business/10” ></p>

Theme developers add background images by style

Not only are they added by style but can be added from style.css or inline style <style> or direct on html tags with attribute is style=“”

for example, developers add theme background images:

from style.css
.header{ background-image: url( image_url ); // or background: url( image_url ); }

OR inline style
<style> .header{ background-image: url( image_url ); // or background: url( image_url ); } </style>

OR direct

<div class=“header” style=“background-image: url( image_url );“></div>
or
<div class=“header” style=“background: url( image_url ) no-repeat top left;“></div>

If you check your theme code you will be able to detect which way the developer is adding the background image. If it is any of those them Lazy Load cannot apply to it.

For a Lazy Load Background images option to be of any use, Theme developers would have to refactor their themes background image loading from any of those to just use

<p data-bg=“http://lorempixel.com/300/200/business/10” ></p>

A developer with a custom theme might do that, but parent theme developers would be highly unlikely to ever do that to just enable background image lazy load. I know we would not do it with our own Responsi Theme Framework just to enable lazy loading of a theme background image.

Regards
Steve

• This reply was modified 8 years, 2 months ago by Steve Truman.