Styling lazy-load images

  • Resolved inge12

    (@inge12)


    6 years, 2 months ago

    If it does what it is advertised to do, the new version of the LiteSpeed Cache looks like a plugin made in cyber-heaven! ??

    I want to lazy-load images (option in this plugin), and I want to use a responsive placeholder (can be implemented through a check box), and I also want a fade-in effect for the images.

    I assume this is all possible?

    On the LiteSpeed site I see this code for a fade-in effect:

    /* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

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

    So where do I put this code? (I use the Weaver theme, and I can add code. Just need to know where).

    I also read that

    Before an image is lazy loaded, it has the data=“lazyloaded” attribute associated with it, which enables PART 1 of the CSS code.

    Is this automatic, or do we have to associate images with a “lazyloaded” attribute?

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Hai Zheng?

    (@hailite)

    Hi,

    You can either add them to your theme’s style.css or any other preferred css as long as it can affect the pages that has lazy-load images. Or you can try Critical CSS Rules setting?

    Best Regards,
    Hai

    Thread Starter inge12

    (@inge12)

    Okay, thanks. I’m having trouble with the basic Lazy-loading. Images just show up as blanks and don’t load at all. So there’s not point worrying about styling!

    Plugin Support Hai Zheng?

    (@hailite)

    If the page has JS error, it may break the lazy loading. I noticed you have couple 403 errors when loading minified JS. Do you have any firewall?

    Thread Starter inge12

    (@inge12)

    Thanks for the feedback. So the JS errors are the result of my specifying minified JS?

    I suppose I should find out what script/plugin is causing the errors.

    No firewall.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    during the process of minify, the generated minified JS will to be stored in in your website folder , but your site all files under /min/xxxxx.js are returning 403 error.

    Please check your logs why it causes 403 error.

    Best regards,

    Thread Starter inge12

    (@inge12)

    Okay, I was wrong about the firewall. I’m using Wordfence, which acts as a firewall.

    Are there any files I should whitelist, and is it safe?

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Wordfence should have logs about what it did , what it blocked …etc

    see if you can’t find anything there.

    also you can just disable WF for few minutes and test it , it might not be related after all.

    Best regards,

    Plugin Support LiteSpeed Lisa

    (@lclarke)

    Hi, @inge12.

    Do you still need help with this? How is it going?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling lazy-load images’ is closed to new replies.