Load GIF faster in web page

Question

I'm making a web-page that is full of GIF images. Is there any way to make my website to load faster? Like load the GIF one by one or just play the GIF on hover and if there is a way may I know how to do it?

Please include more specific information about your gifs. How big they are? How displayed they are? — deem, Jul 20 '17 at 08:24
Load blocks by blocks on scroll page . Look at https://stackoverflow.com/questions/13237555/jquery-load-content-when-scroll-to-bottom-100px-of-page-multiple-events-fired — Nikola Lukic, Jul 20 '17 at 08:26

score 0 · Answer 1 · answered Jul 20 '17 at 08:28

You can make a hover effect to show these images using CSS transitions. When you hover over the H1 tag, the image will display.

HTML

<h2>Fade in Overlay</h2>
<div class="container">
    <h1>Show Image</h1>
    <div class="overlay">
        <img src="http://via.placeholder.com/500x500" alt="Avatar" class="image"
    </div>
</div>

CSS:

.container {


position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

Wouldn't they not be loaded if they are included in the HTML? All you are doing is hiding the image from the user, not preventing it from being loaded. — Sam Bunting, Jul 20 '17 at 08:30

score 0 · Answer 2 · answered Jul 20 '17 at 08:28

0

You could first of all try compressing the GIFs somehow first and seeing if that would improve your webpage load times.

If the page is holding several dozens of animated GIFs, my recommendation is to load them in chunks. Five at a time, ten at a time maybe. If you load them one by one, users may get annoyed that only one would be showing at a time, load all of them at once the user will get annoyed that any of them wouldn't be loading fast enough. You need to work with a combination of both.

answered Jul 20 '17 at 08:28

Sam Bunting

845
1
15
36

May i know how to load the GIFs five at a time? – jaycel clarkoutsourcing Jul 20 '17 at 08:54
The easiest way I can think of is to use jQuery and Ajax. You can do something like call a Ajax request when a user scrolls to the bottom of the page. [See this answer](https://stackoverflow.com/a/8079869/5191455) which would explain it a bit more. – Sam Bunting Jul 20 '17 at 09:17

Load GIF faster in web page

2 Answers2