Проиграть анимацию по клику
 

Взываю о помощи, нужен скрипт для просмотра анимации по клику.

К примеру в посте 10 картинок анимаций (GIF) при загрузке страницы она довольно долго грузится так как анимации размером более 3мб каждая.

Нужен скрипт который выводил бы картинки вместо анимаций (или первый кадр из анимации) и по клику на эту картинку вместо нее открывалась бы анимация.

Пример: http://fishki.net/1217098-vzryv-mozg...hnye-vewi.html

Выдернул кусок кода но не работает :(

function gifAnimated(cover) {
	var div_animated = $(cover).find('.gif-animated');
	var div_static = $(cover).find('.gif-static');
	var img_animated = div_animated.find('img');
	var gif_over = div_static.find('.gif-over');
	if (div_animated.hasClass('hide')) {
		if (img_animated.hasClass('noload')) {
			gif_over.addClass('preloader');
			img_animated.removeClass('noload').addClass('preload');
			var img = new Image();
			$(img).load(function() {
				img_animated.attr('src', img_animated.data('src'));
				img_animated.removeClass('noload').removeClass('preload').addClass('load');
				if (gif_over.hasClass('preloader')) {
					gif_over.removeClass('preloader');
					div_static.addClass('hide');
					div_animated.removeClass('hide');
				}
			});
			$(img).attr('src', img_animated.data('src'));
		}
		else if (img_animated.hasClass('preload')) {
			gif_over.toggleClass('preloader');
		}
		else {
			div_static.addClass('hide');
			div_animated.removeClass('hide');
		}
	}
	else {
		div_animated.addClass('hide');
		div_static.removeClass('hide');
	}
	return false;
}

<style>
.gif-cover .gif-static, .gif-cover .gif-animated { 
display: inline-block;
max-width: 100%;
position: relative;
}

.gif-over { 
background: url("http://s.fishki.net/css/fishki/img/gif-over.png") 0px 0px no-repeat transparent;
height: 70px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
overflow: hidden;
position: absolute;
text-indent: -999px;
top: 50%;
width: 70px;
z-index: 2;
}
</style>

<div class="gif-cover">
	<a onclick="return gifAnimated(this)" href="http://s.fishki.net/upload/post/201310/19/1211115/999863d8d105c39f9da19228bf10ace7.gif">
		<div class="gif-static">
			<img src="http://s.fishki.net/upload/post/201310/19/1211115/999863d8d105c39f9da19228bf10ace7_preview.jpg" alt="физика, гифки, интересно, увлекательно" title="Увлекательная физика">
			<span class="gif-over">Посмотреть</span>
		</div>
		<div class="gif-animated hide">
			<img src="http://s.fishki.net/upload/post/201310/19/1211115/999863d8d105c39f9da19228bf10ace7.gif" alt="физика, гифки, интересно, увлекательно" title="Увлекательная физика ">
		</div>
	</a>
</div>

есть еще такое http://javascript.ru/forum/misc/5434...html#post32818
работает! но IE ругается на ActiveX

Там все просто, при загрузке gif-ка дублируется и форматируется в *.jpg и именно эта картинка идет как начальная, а при клике её src меняется на *.gif.
Все просто ;)