LAZY LOAD IMAGE

  • Resolved yashsharma1

    (@yashsharma1)


    4 years, 8 months ago

    I am using Litespeed cache lazy load feature, so there is only 1 effect of lazy load.
    So I wanna use this code to change the effect, as this is specified on their website:
    /* PART 1 – Before Lazy Load */
    img[data-lazyloaded]{
    opacity: 0;
    }

    /* PART 2 – Upon Lazy Load */
    img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
    }

    where should I paste this CSS as I tried putting in my theme <head> </head> and it was still not working

    • This topic was modified 4 years, 8 months ago by yashsharma1.
Viewing 4 replies - 1 through 4 (of 4 total)

  • You can paste in Appearance -> Customize -> Additional CSS and then clear the cache once.

    Kind regards

    Thread Starter yashsharma1

    (@yashsharma1)

    Thanks a lot, it is working, by the way, is there any other CSS, that can change the effect like the above CSS creates fade-in effect so any other like spinner effect or any other.
    thanks a lot

    @yashsharma1

    You can add CSS codes in the theme customizer “Custom CSS” area or footer part of the theme template file ( footer.php ) like below,

    <style type=”text/css”>
    img[data-lazyloaded]{ opacity: 0; }img.litespeed-loaded{ -webkit-transition: opacity .5s linear 0.2s;-moz-transition: opacity .5s linear 0.2s;transition: opacity .5s linear 0.2s;opacity: 1; }
    </style>

    Thread Starter yashsharma1

    (@yashsharma1)

    thanks a lot.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘LAZY LOAD IMAGE’ is closed to new replies.