Lazyload on background-image using class only

  • thibautdzebayi

    (@thibautdzebayi)


    7 years, 10 months ago

    Hello,

    First of all, I would like to thank you for this plugin. I’ve tested a lot of lazy load plugins, but this one is my favorite so far.

    The last thing I’m trying to achieve is to lazy load background-image. I’ve search and found some tricks one the forum but, my wordpress theme uses a lot of shortcodes, so I can’t add a “data-bg” to the markup… only classes.

    So is it possible to add a lazy load effect to background images just using class=”” ?

    Thank you for the support !

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

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

    (@florianbrinkmann)

    7 years, 10 months ago

    Hi,

    it should be possible to do that, and I already worked on a first draft that works if the background image is set via the CSS background-image property. You can find the version here: https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.5.0-alpha.1

    The problem: it does not work if the image is set via background, and there is no fallback for disabled JavaScript.

    Best,
    Florian

    Thread Starter thibautdzebayi

    (@thibautdzebayi)

    7 years, 10 months ago

    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.

    Thread Starter thibautdzebayi

    (@thibautdzebayi)

    7 years, 10 months ago

    Oups, moreover, I got this fatal error trying to active the 3.5.0-alpha.

    
Fatal error: Uncaught Error: Class 'FlorianBrinkmann\LazyLoadResponsiveImages\Plugin' not found in /home/larbreet/public_html/wp-content/plugins/lazy-loading-responsive-images-3.5.0-alpha.1/lazy-load-responsive-images.php:32 Stack trace: #0 /home/larbreet/public_html/wp-admin/includes/plugin.php(1897): include() #1 /home/larbreet/public_html/wp-admin/plugins.php(172): plugin_sandbox_scrape('lazy-loading-re...') #2 {main} thrown in /home/larbreet/public_html/wp-content/plugins/lazy-loading-responsive-images-3.5.0-alpha.1/lazy-load-responsive-images.php on line 32
    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 10 months ago

    Hey,

    no problem 🙂 Yes, you should only need to add the lazyload class to the element.

    To the error: hm. You tried the lazy-loading-responsive-images.zip from the GitHub release page?

    Best,
    Florian

    Thread Starter thibautdzebayi

    (@thibautdzebayi)

    7 years, 10 months ago

    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/

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 10 months ago

    Hi,

    the problem is that the background image is not set as an inline style for the elemeht with the lazyload class. It is defined in a style element, and that does not work unfortunately, sorry… If there is a way to say your plugin to output the background image as an inline style of the element, it should work.

    Florian

    Thread Starter thibautdzebayi

    (@thibautdzebayi)

    7 years, 10 months ago

    Oh, too bad.. Anyway, I’m gonna change how my homepage is. And I’ll back to this presentation if one day, your plugin evolves until this feature. Thank you again ! 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Lazyload on background-image using class only’ is closed to new replies.