1

in the first block of the site I have a large gif image that takes a very long time to load.

<picture>
            <source srcset="https://media.githubusercontent.com/media/javascripteaser88/fintech-          
            remake/main/media/vapor.gif" type="image/gif" media="(min-width:501px)">
            <source srcset="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/mobile.gif" type="image/gif" media="(max-width:501px)">
            <img src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.gif"alt="outrun gif" class="outrun">
</picture>

it looks very bad when the user has to wait a few tens of seconds before seeing the content (and someone's gif won't even load completely).

So I need to show some kind of lightweight image until my gif animation is fully loaded, or just show the first frame of this animation, but i don't know how to do it. Or you can advise some other ways to reduce the waiting time that I did not expect.

P.S. here is a link to the site hosted on github pages https://javascripteaser88.github.io/fintech-remake/

ШПИПСИК CHANNEL
  • 21
  • 3
  • 1
    You might want to take a look at [this question](https://stackoverflow.com/questions/40746776/how-to-load-a-small-placeholder-image-before-loading-the-actual-content). Using `background-image` and a lightweight image you can have a placeholder show while the real image loads. – EssXTee Aug 11 '22 at 17:47
  • Does this answer your question? [How to load a small placeholder image before loading the actual content](https://stackoverflow.com/questions/40746776/how-to-load-a-small-placeholder-image-before-loading-the-actual-content) – mfluehr Aug 11 '22 at 18:49
  • no, now it's all just loading for even longer or does it work the same way – ШПИПСИК CHANNEL Aug 11 '22 at 22:31
  • ` ` – ШПИПСИК CHANNEL Aug 11 '22 at 22:36

0 Answers0