Trailer box loads image to page before the animation happens. And a Portfolio question
Hi,
I have an issue with the animation of a .png image in a trailer box I have on my homepage, which I am rebuilding. I have tried to use a column instead of the trailer box and the same issue occurs. I also tried different animations, and it's the same result.
This is the sequence of events I am seeing:
- Load Page - 2. Section Background image appears - 3. Overlaid trailer box image appears for 0.25 seconds in the final position - 4. trailer box disappears - 5. trailer box zooms in and settles in the final position.
Step 3 shouldn't happen.
I have cleared the browser cache and tried in different browsers, but the issue remains. Do you have a solution for this please.
Also, In the Snapshot prebuilt site, https://themes.muffingroup.com/be/snapshot/
In the portfolio previews, there is a hover effect that reveals "Read More" in a circle. Where is that edited please?
Thank you
Comments
1) This is normal behavior, because the .css file have to load all of the styles, it takes usually not more than second (as in your result)
The only way to change that behavior, is to install some kind of pre-loader, which will display the content of your website after all of the images, css, js, plugins get loaded.
2) Well, it has to be edited with the CSS code, what do you want to do? With some minor chnages we can help you to create that code.
thanks
Thank you.
I guess this would affect the page loading time, making it slower; not a great thing for SEO. Yes please for the code though, so I can give it a try. If not, I'll just remove the animation from the top of the page as it doesn't look great.
Well, in that case it's the only way to achieve that, even in static page, it will look like that, it's just basic HTML/CSS thing :(
So, do you need our further help?
Thanks
Yes please. Some sample code for the loading order of the page would be great, so I can experiment to see if that loading order slows the page down too much.
p.s. As a thought, when I originally loaded your template, the issue didn't occur. I wonder whether this is because the template's sample animated image had a smaller file size and so took less time to load, which then gave resources for the CSS animation to load more quickly. Do you think this is possible?
I am going to compress my animated image a long way to see if it makes a difference.
Alas, No!
1) Sorry, but we cannot provide that kind of stuff on support forum, also we do not provide help with theme files customizations.
But surely, you should take a look at the single.php file and builder/class-mfn-builder-items.php file
2) I don't think so, because images in wordpress are using the lazy load, which means they (images) will load even when all of the elements are loaded.
It means, that website does not wait for the images, for loading time, placeholders with same dimensions are provided.
Thanks
Thanks. I am still a bit curious why it didn't seem to work that way with the original template
Did you have answer to the second part of my question, please?
"Also, In the Snapshot prebuilt site, https://themes.muffingroup.com/be/snapshot/
In the portfolio previews, there is a hover effect that reveals "Read More" in a circle. Where is that edited please?"
I answered it to that question few answers ago, can you give me a reply?
2) Well, it has to be edited with the CSS code, what do you want to do? With some minor chnages we can help you to create that code.
Thanks
Sorry, somehow I missed that. I just wanted to change the wording from 'read more' to 'see more'
Thanks
To change this text, please, go to Betheme -> Theme options -> Translate -> Blog & Portfolio.
Thanks
Fabulous. Thank You!