Optimole
Forum Replies Created
-
Hi there,
Can you contact us on optimole.com/contact with the site details to sort it out?
Thank you!
Hi Chris,
I’m truly sorry for the difficulties you’ve encountered; it’s clear that this situation is far from ideal.
Our team has been actively trying to assist you. We’ve exchanged several emails and requested access to your site to address the issues directly. However, we understand and respect your decision not to grant access. As an alternative, we offered to export the images from your account to help resolve the matter.
Unfortunately, given the circumstances, there was a limit to what we could achieve and we regret that we haven’t met your expectations in this case.
Right now we don’t have this option available. Would you mind sharing the page where this is available?
Also how you embed those images? Is some custom field or similar? I can share some code snippet to help in this case.
Hi there,
We fixed this in the most recent version, please update it.
Thank you!
Sure thing, good point, we will update it.
Thank you for contributing!
Hi Nazrinn, we have this doc already https://docs.optimole.com/article/1910-lazy-loading-animations-for-images. Would you see something else being added there?
Thank you!
Hey Nazrinn,
Thanks a lot for sharing your progress, happy to hear that was helpful. Adding a wrapper might bring up some other layout issues with various websites so that’s we havent took this approach until now.
HI there,
We dug a bit deeper into this and we have also an alternative but it depends a lot on how the images are displayed on your website.
There is a good chance there will be issues where images don’t have a direct parent, or have a margin themselves, so this is more of a hit or miss thing.
I don’t think it’s a very sane solution unless you have full control of the markup, or wants to restrict the selectors more to some more specific tags, but we thought it would still be good to share.
/* PART 1 - Before Lazy Load */ img[data-opt-src]:not([data-opt-lazy-loaded]) { /* Remove the blur & make the image transparent */ filter: none; opacity:0; } /* PART 2 - Upon Lazy Load */ img[data-opt-lazy-loaded] { animation: fade-in 3s ease; } /* Set the background on the parent of the images that have thedata-opt-srcattribute as a direct descendant */ *:has(>[data-opt-src]) { background: red; } @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }Hi Nazrin,
Here you have something that it might help.
/* PART 1 - Before Lazy Load */ img[data-opt-src]:not([data-opt-lazy-loaded]) { filter: none; background: red !important; } /* PART 2 - Upon Lazy Load */ img[data-opt-lazy-loaded] { transition: all 1s ease; opacity: 1; animation: fade-in; background: red !important; } @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }I don’t think the flash is avoidable, as you essentially want to transition the image itself from 0 to 100 opacity, which also makes the background of that image have a 0 opacity at the beginning of the animation. In addition to this,
:beforeand:aftertags don’t work on img, so those aren’t of any help.Hi there,
Yes, it should be fine. To remove the blur, you can add this CSS rule to your site:
img[data-opt-src]:not([data-opt-lazy-loaded]) { opacity: 1!important; -webkit-filter: none!important; -moz-filter: none!important; -o-filter: none!important; -ms-filter: none!important; filter: none!important; transform: none!important; animation: none!important; -webkit-transform: none!important;}Let me know if this helps.
Hi,
We changed 2 months ago. For now the 5k limits users are unaffected.
FYI, we have this option which can give you an extra 20k visits if you enable https://docs.optimole.com/article/1940-optimole-badge
Hi Nazrinn,
Just to confirm, those images are used as background images? If so, the placeholder is not applying there, it’s just toggling the visibility of those images.
Is that helping you?
Hi,
Optimole is compatible with Cloudflare as best a it could be right now, there is no issue that we are aware of.
Hi there,
Do you have any details regarding the errors reported? Any server errors, browser console errors?
What version of both are you using?