Stop GIFs from Preloading

Question

I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.

This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.

Is this possible with either some PHP or good-old JavaScript?

Thanks

How are you switching out the png with the gif? CSS? Javascript? — Danny Kirchmeier, Feb 22 '12 at 19:52
PHP is server side, so it's not relevant. What you want is JavaScript, which runs on the client side. CSS might also work (with the :hover event), but I'm not sure if it will also preload the image (easy enough to check by testing it and watching the server logs). — Kitsune, Feb 22 '12 at 19:54

score 7 · Accepted Answer · answered Feb 22 '12 at 19:53

7

Change the URL of the image with hover. In this case with jQuery

$('#my_image').hover(function(){
    $('#my_image').attr('src','my.gif');
});

Want to make it dynamic without having to set it per image? Add the HTML5 Data element:

<img src="my.png" data-gif="my.gif" />

And with JavaScript:

$('img').hover(function(){
    $(this).attr('src',$(this).data('gif'));
});

answered Feb 22 '12 at 19:53

Rene Pot

24,681
7
68
92

Where would I add the jQuery and JavaScript to my page? Do I have to use the HTML5 Data element for all my tags? – Filuren Feb 22 '12 at 20:00
use the data element for all images you want to replace. The jQUery can be put anywhere, just don't forget to include jQuery on your site – Rene Pot Feb 22 '12 at 20:12
...or better don't use jQuery for simple tasks like that one, it's overhead. – Bergi Feb 22 '12 at 20:16
http://pastebin.com/rBT4RBbW Something like this or do I miss something? It just display the thumbnail, no gif when hovered – Filuren Feb 22 '12 at 20:21
copy the second javascript i posted, not the first one ;) – Rene Pot Feb 22 '12 at 20:22
http://pastebin.com/HPk0CBNw How it looks now, but gif doesn't load on hover though – Filuren Feb 22 '12 at 20:27
Take a look at this fiddle: http://jsfiddle.net/k4hSd/ Are you sure jQuery is implemented? – Rene Pot Feb 22 '12 at 20:48
http://pastebin.com/38gWx1dp This is how my Testing site looks, nothing happens when I hover over my png thumbnail. I also tried to use src="scripts/jquery.js" in my body, didn't work either – Filuren Feb 22 '12 at 21:05
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/8090/discussion-between-ninjaboi21-and-topener) – Filuren Feb 22 '12 at 21:21

score 0 · Answer 2 · answered Feb 22 '12 at 19:54

0

You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.

Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.

answered Feb 22 '12 at 19:54

Diodeus - James MacFarlane

112,730
33
157
176

How do you use AJAX to load an image? – Bergi Feb 22 '12 at 19:56
You don't - you use AJAX to grab the HTML that contains the image references. – Diodeus - James MacFarlane Feb 22 '12 at 20:00

score 0 · Answer 3 · answered Feb 22 '12 at 19:54

You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.

Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.

score 0 · Answer 4 · edited May 23 '17 at 11:56

Are the file names the same except for the extension? If so I would recommend this approach

Stop a gif animation onload, on mouseover start the activation

What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.

Edit:

Then on mouseout you would switch the source back to the .png.

Stop GIFs from Preloading

4 Answers4