Здравствуйте,
Как можно сделать чтобы загрузчик работал
html
<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>');
});
</script>
script
<script type="text/javascript">
var cSpeed=3;
var cWidth=160;
var cHeight=20;
var cTotalFrames=12;
var cFrameWidth=160;
var cImageSrc='sprites.gif';
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
new imageLoader(cImageSrc, 'startAnimation()');
</script>