simona6 Posted January 6, 2021 Share Posted January 6, 2021 On our website we have various images, but they all seem to 'load in'... rather than just 'appear'. It's particularly noticeable on the curved image at the top of our site. IS this something anyone has come across before? Happy to post link if that is allowed. Simon Quote Link to comment Share on other sites More sharing options...
requinix Posted January 6, 2021 Share Posted January 6, 2021 Link would be nice. Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 https://www.new.79design.org.uk. This is in demo... but will be live soon. All images, then fade in for a second. We have no lazy loading on. And opacity is on 1. So why do they not just 'appear'?! Odd. hope you can assist. Quote Link to comment Share on other sites More sharing options...
requinix Posted January 6, 2021 Share Posted January 6, 2021 Kinda hard to troubleshoot given its nature, but the fade in is being controlled by Javascript and not CSS, and I believe it's code related to image loading. I see a loading=lazy attribute? Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 Can you please direct me to it, to see if I can remove it? There is nothing set in the theme that does it. Quote Link to comment Share on other sites More sharing options...
requinix Posted January 6, 2021 Share Posted January 6, 2021 I don't know your website. All I can do is point you in a direction to look for more answers. Do you have any sort of lazy image loading set up? Looks like you have some WP theme going - could that be responsible? And it doesn't seem to be "all" images. Mostly just that green wavy banner thing. Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 The theme doesn't have any setting for lazy loading. We use to do it via Fastest cache, but we no longer use that plugin. Can you show me what code or what you have found that alerts to you Lazy Loading, if only for that image? I notice on the smaller 'tiled' images below, they do it too, when you refresh the page. Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 Found this.... something about it not loading straight away...? Not sure if that is fonts only tho on a preload. Quote Link to comment Share on other sites More sharing options...
requinix Posted January 6, 2021 Share Posted January 6, 2021 On the <img> for the green banner, it has set loading=lazy. I randomly checked a few other images that didn't seem to be fading in and they don't use lazy loading. When I load the page, I can see that the CSS opacity on the image is being changed (by Javascript). I can intercept the Javascript that is doing that and see it happening, however it's not an easy matter to see what code is responsible for it. Those preloading things are separate and not related. Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 So no way to see what Javascript file (code within the file) is causing it, as then I could narrow down where it is coming from - ie, theme folder or plugin folder... Quote Link to comment Share on other sites More sharing options...
requinix Posted January 6, 2021 Share Posted January 6, 2021 Not very easily, at least. The opacity changes are asynchronous, which means the code making the changes isn't connected to the code that started the process. The best lead I can offer you right now is that the fade in effect seems to be applied only to the green banner, as far as I can see. So look at that and find out what makes it different from other images. Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 You are dead right. I've replaced the Image WP Bakery method with the Text Box method, and a little CSS to take any padding off around it, and it loads instantly. It must be part of WP Bakery! In that case I'll setup a CSS class to cater for all those curves, and re-assign them with that method. Thanks a lot. Just wish I could ascertain where in Bakery it is doing it. As the otheres, the tiles below it, they do it. They use the Image element. I dont' care abotu those fading in... but would be nice to have the control! Quote Link to comment Share on other sites More sharing options...
simona6 Posted January 6, 2021 Author Share Posted January 6, 2021 Rolled it out on a few other pages now. They load instantly. Good intentions from Bakery, but better to let the designer control it I think. Anyway.... at least I can control it using this method. Thanks for your help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.