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

Answer 1

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'));
});