Hi Dan,
could you activate the plugin so I can take a look at the problem?
Cheers,
Florian
Thread Starter
danliv
(@danliv)
Hi Florian,
Yes, it’s on now. It’s our live site, so I can’t leave it activated for long though.
Thanks for your help,
Dan
-
This reply was modified 8 years, 10 months ago by
danliv.
Hi Dan,
okay, I have a page with the problem open, so you can deactivate it again 🙂 Will search the issue and publish a fix (hopefully soon).
Florian
It may be a problem with the minify plugin you are using. Could you try to deactivate it temporarily and check if the lazy loading works then? It seems that an inline script of the plugin gets filtered out by something.
Thread Starter
danliv
(@danliv)
Yeah, that seems to have sorted it, although I will need to use a minifying plugin again – since it’s a photography website, we need all the optimisations we can, to handle the image file sizes. Is there anything you can do to make it compatible with a minifying plugin? Or can you recommend another minifying plugin to try?
Thanks,
Dan
Thread Starter
danliv
(@danliv)
Update: Just tried a different minifying plugin, seems to be working ok so far, thanks for your help!
Dan
Okay cool, happy it works now 🙂 The plugin that causes the problem was »Better WordPress Minify« (I will report the issue, so the author can fix it)?
And one other thing: clear the cache of your caching plugin, so also users that are not logged in see the images now (I had to clear my browser cache to see the changes) 🙂
Thread Starter
danliv
(@danliv)
Ah yes, good point!
One feature request for the future – animation as the images load in 🙂
Thanks!
Dan
»animation as the images load in«
What kind of animation? 🙂 Just fading in (changing the opacity slowly), or something more fancy?
Florian
Thread Starter
danliv
(@danliv)
I love the way the images kind of fade in on this website: http://thekitcheners.co.uk/2017/07/wedding-in-transylvania.html
Thanks!
Dan
Hey! You should be able to get this effect with the following CSS:
.js img.lazyload,
.js img.lazyloading {
opacity: 0;
}
.js img.lazyloaded {
opacity: 1;
transition: opacity .5s;
}
Put it into the »Custom CSS« field in the customizer.
Cheers,
Florian