thibautdzebayi

Ok, I found a solution. For the others, you may add a function like this, to manually add a data-bg attribute to your div or anything else. And add a data-lazyloaded attribute to this same div.

It works, but I was expecting to add a class instead of ‘data-lazyloaded’.

(function($) {
'use strict';

        $('#section-69-5381').attr('data-bg', 'url(https://yourwebsite.fr/wp-content/uploads/2020/07/couv_noct.webp)');
        $('#section-69-5381').attr('data-lazyloaded','');

}(jQuery));

How can I try ? Do you use a specific JS library ?

And, I’ve checked the roadmap of WP 5.5, it looks like lazyload should apply only on .

Sorry, I tried with the source code… Anyway, I installed the plugin but It doesn’t work.. maybe it’s from my theme ? Or a plugin ?

What I did :
1 – Exclude both lazysizes.min.js & ls.unveilhooks.min.js from autoptimize. They are loaded in the footer with the defer attribute.
2 – Add class=”lazyload” to a div containing a background image. Maybe you could take a look if something is wrong in my code ? I use the newspaper theme with tagDiv composer, it’s how look the code when I use the composer :

<div id="td_uid_10_5b4ef33f672ce" class="tdc-row stretch_row_content td-stretch-content"><div class="vc_row td_uid_30_5b4ef33f67309_rand lazyload wpb_row td-pb-row tdc-element-style">
<div class="td_uid_10_5b4ef33f672ce_rand_style td-element-style" style="opacity: 0; transition: opacity 1s;">
<div class="td-element-style-before"><style>
.td_uid_10_5b4ef33f672ce_rand_style > .td-element-style-before {
content:'' !important;
width:100% !important;
height:100% !important;
position:absolute !important;
top:0 !important;
left:0 !important;
display:block !important;
z-index:0 !important;
background-image:url("https://www.larbreetlapirogue.fr/wp-content/uploads/2018/07/indonesie.jpg") !important;
background-position:center center !important;
opacity:0.7 !important;
background-size:cover !important;
}
</style></div>
</div>
<div class="vc_column td_uid_31_5b4ef33f674a5_rand  wpb_column vc_column_container tdc-column td-pb-span12"><div class="wpb_wrapper">
<div class="tdm_block td_block_wrap tdm_block_column_title td_uid_32_5b4ef33f6753d_rand tdm-content-horiz-center td-pb-border-top td_block_template_1" data-td-block-uid="td_uid_32_5b4ef33f6753d"><div class="td-block-row"><div class="td-block-span12 tdm-col">
<div class="tds-title tds-title2 td-fix-index td_uid_33_5b4ef33f67830">
<h3 class="tdm-title tdm-title-xsm">Indonésie</h3>
<div class="tdm-title-line"></div>
</div>
</div></div></div>
<div class="tdm_block td_block_wrap tdm_block_button td_uid_34_5b4ef33f679fe_rand tdm-content-horiz-center td-pb-border-top td_block_template_1" data-td-block-uid="td_uid_34_5b4ef33f679fe">
<div class="tds-button td-fix-index"><a href="/carnets-de-voyage/indonesie/" class="tds-button1 tdm-btn tdm-btn-lg td_uid_35_5b4ef33f67d15"><span class="tdm-btn-text">Carnets de voyage d'Indonésie</span></a></div>
</div>
</div></div>
</div></div>

As you can see, there is the lazyload class in the second div.. but as you can check using the console, https://www.larbreetlapirogue.fr/wp-content/uploads/2018/07/indonesie.jpg is not lazyloaded on the homepage : https://www.larbreetlapirogue.fr/

• This reply was modified 7 years, 10 months ago by thibautdzebayi.

Thank you Florian ! Sorry for my lack of knowledge but, with that plugin you gave me, I just need to add class="lazyload"to div I want to be lazyloaded ??

Thank you.