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

  • I am trying to lazy load the images of the two post grids on michaelkummer.com. 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

    (@florianbrinkmann)

    Hi Michael,

    as far as I can see (https://thrivethemes.com/tkb_item/how-to-edit-the-html-of-your-page/), 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?

    Best,
    Florian

    Thread Starter mkummer

    (@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

    (@florianbrinkmann)

    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 (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/noscript). 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">
    	<noscript>
    		<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>
    	</noscript>
    </div>
    

    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: https://cloudup.com/czBlLPzAlCI

    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!
    Florian

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