Support » Plugin: Lazy Loader » Lazy load CSS background-image

  • I am trying to lazy load the images of the two post grids on Those elements are part of Thrive Architect from Thrive Themes.

    If lazy-loading the individual images doesn’t work, I’d be OK lazy-loading the whole DIV, containing all post thumbnails.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Florian Brinkmann


    Hi Michael,

    as far as I can see (, Thrive Architect lets you edit the HTML of your page. Could you post the HTML of the area around one of the post grids (including the markup of the post grid) that comes in that view of Thrive Architect?


    Thread Starter mkummer


    Hi Florian,

    Here you go:

    <div class=”thrv_wrapper thrv-page-section tve_empty_dropzone tcb-window-width” data-tve-style=”1″ data-css=”tve-u-1672bbb999a” style=”width: 1101px; left: -10.5px;”><div class=”tve-page-section-out” data-css=”tve-u-1672d82199f”></div><div class=”tve-page-section-in” data-css=”tve-u-1672bbb99b6″><div class=”thrv_wrapper thrv_heading” data-tag=”h2″ data-css=”tve-u-1672d830b71″><h2 class=”tve_p_center” data-css=”tve-u-167421d1154″>Latest in Technology</h2></div><div class=”thrv_wrapper thrv_post_grid” data-css=”tve-u-1672bceea30″><div class=”thrive-shortcode-config” style=”display: none !important”>__CONFIG_post_grid__{“display”:”grid”,”grid_layout”:”horizontal”,”columns”:”3″,”text_type”:”summary”,”read-more-text”:”Read More”,”image-height”:”200″,”font-size”:””,”text-line-height”:””,”teaser_layout”:{“featured_image”:”true”,”title”:”true”,”text”:”true”,”read_more”:”false”},”layout”:[“featured_image”,”title”,”text”,”read_more”],”orderby”:”date”,”order”:”DESC”,”recent_days”:”0″,”posts_start”:”0″,”posts_per_page”:”3″,”content_types”:[“post”],”filters”:{“category”:[“Technology”]},”action”:”tcb_editor_ajax”,”custom”:”post_grid”,”nonce”:”a102e38edc”,”exclude”:0}__CONFIG_post_grid__</div></div><div class=”thrv_wrapper thrv-divider” data-color=”rgb(217, 217, 217)” data-thickness=”1″ data-style=”tve_sep-1″ data-css=”tve-u-1672bd13b42″>

    Plugin Author Florian Brinkmann


    Hi Michael,

    cool, thanks! Two options:

    1. Maybe the plugin has filters that would allow to modify the output of the background images directly, so that you can use my plugin for lazy-loading them. To see if that is possible, I would need the plugin files.
    2. You can use the noscript extension of lazysizes ( With that, it should be enough to modify the markup of the surrounding element like this:

    <div class="thrv_wrapper thrv_post_grid lazyload" data-noscript="" data-css="tve-u-1672bceea30">
    		<div class="thrive-shortcode-config" style="display: none !important">
    			__CONFIG_post_grid__{"display":"grid","grid_layout":"horizontal","columns":"3″,"text_type":"summary","read-more-text":"Read More","image-height":"200″,"font-size":"","text-line-height":"","teaser_layout":{“featured_image":"true","title":"true","text":"true","read_more":"false"},"layout":[“featured_image","title","text","read_more"],"orderby":"date","order":"DESC","recent_days":"0″,"posts_start":"0″,"posts_per_page":"3″,"content_types":[“post"],"filters":{“category":[“Technology"]},"action":"tcb_editor_ajax","custom":"post_grid","nonce":"a102e38edc","exclude":0}__CONFIG_post_grid__

    I added the lazyload class and data-noscript attribute to the div and wrapped its content into a noscript element, like described in the lazysizes documentation.

    The problem: the noscript extension is not part of my plugin, so you would need to include that by yourself. I created a small plugin for that, you can find it here:

    Just upload that and the Lazy Loader plugin, enable both and modify the markup of the post grid areas like showed above. That should work 🙂

    One word of warning: It is totally possible that adding the noscript element hides those areas in the visual editing view in the backend, and I have no idea if there might be other side-effects.

    Hope that helps!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lazy load CSS background-image’ is closed to new replies.