lemonl, и что нетак работает?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<input name="submit" id="submit" value="Load More" type="submit">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="cosder"></div>
<script>
$("#submit").click(function() {
$("#cosder").append('<div id="loaderImage"></div>');
new imageLoader(cImageSrc, 'startAnimation()');
});
</script>
<script type="text/javascript">
var cSpeed=3;
var cWidth=160;
var cHeight=20;
var cTotalFrames=12;
var cFrameWidth=160;
var cImageSrc='http://javascript.ru/forum/attachment.php?attachmentid=1852&stc=1&d=1373567258';
var cImageTimeout=false;
var cIndex=0;
var cXpos=0;
var cPreloaderTimeout=false;
var SECONDS_BETWEEN_FRAMES=0;
function startAnimation(){
document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
document.getElementById('loaderImage').style.width=cWidth+'px';
document.getElementById('loaderImage').style.height=cHeight+'px';
//FPS = Math.round(100/(maxSpeed+2-speed));
FPS = Math.round(100/cSpeed);
SECONDS_BETWEEN_FRAMES = 1 / FPS;
cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);
}
function continueAnimation(){
cXpos += cFrameWidth;
//increase the index so we know which frame of our animation we are currently on
cIndex += 1;
//if our cIndex is higher than our total number of frames, we're at the end and should restart
if (cIndex >= cTotalFrames) {
cXpos =0;
cIndex=0;
}
if(document.getElementById('loaderImage'))
document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';
cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
}
function stopAnimation(){//stops animation
clearTimeout(cPreloaderTimeout);
cPreloaderTimeout=false;
}
function imageLoader(s, fun)//Pre-loads the sprites image
{
clearTimeout(cImageTimeout);
cImageTimeout=0;
genImage = new Image();
genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
genImage.onerror=new Function('alert(\'Could not load the image\')');
genImage.src=s;
}
//The following code starts the animation
</script>
</body>
</html>