jquery loaing Анимированный

Здравствуйте,

Как можно сделать чтобы загрузчик работал

html

Код (Text):

1.  
2. <input name="submit" id="submit" value="Load More" type="submit">
3.  
4. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
5. <div id="cosder"></div>
6.  
7. <script>
8. $("#submit").click(function() {
9.     $("#cosder").append('<div id="loaderImage"></div>');
10. });
11. </script>

script

Код (Text):

1.  
2. <script type="text/javascript">
3.     var cSpeed=3;
4.     var cWidth=160;
5.     var cHeight=20;
6.     var cTotalFrames=12;
7.     var cFrameWidth=160;
8.     var cImageSrc='sprites.gif';
9.    
10.     var cImageTimeout=false;
11.     var cIndex=0;
12.     var cXpos=0;
13.     var cPreloaderTimeout=false;
14.     var SECONDS_BETWEEN_FRAMES=0;
15.    
16.     function startAnimation(){
17.        
18.         document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
19.         document.getElementById('loaderImage').style.width=cWidth+'px';
20.         document.getElementById('loaderImage').style.height=cHeight+'px';
21.        
22.         //FPS = Math.round(100/(maxSpeed+2-speed));
23.         FPS = Math.round(100/cSpeed);
24.         SECONDS_BETWEEN_FRAMES = 1 / FPS;
25.        
26.         cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);
27.        
28.     }
29.    
30.     function continueAnimation(){
31.        
32.         cXpos += cFrameWidth;
33.         //increase the index so we know which frame of our animation we are currently on
34.         cIndex += 1;
35.          
36.         //if our cIndex is higher than our total number of frames, we're at the end and should restart
37.         if (cIndex >= cTotalFrames) {
38.             cXpos =0;
39.             cIndex=0;
40.         }
41.        
42.         if(document.getElementById('loaderImage'))
43.             document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';
44.        
45.         cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
46.     }
47.    
48.     function stopAnimation(){//stops animation
49.         clearTimeout(cPreloaderTimeout);
50.         cPreloaderTimeout=false;
51.     }
52.    
53.     function imageLoader(s, fun)//Pre-loads the sprites image
54.     {
55.         clearTimeout(cImageTimeout);
56.         cImageTimeout=0;
57.         genImage = new Image();
58.         genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
59.         genImage.onerror=new Function('alert(\'Could not load the image\')');
60.         genImage.src=s;
61.     }
62.    
63.     //The following code starts the animation
64.     new imageLoader(cImageSrc, 'startAnimation()');
65. </script>

 

Ипользую этот загрузчик, можно скачать

http://preloaders.net/ru/horizontal

а именно Анимированный JavaScript'ом

Использование без скрипта $("#cosder").append('<div id="loaderImage"></div>' работает отлично, но когда добавляю через скрип не работает.

 

Скрипт который отлично работает:
html

Код (Text):

1.  
2. <div id="loaderImage"></div>

script

Код (Text):

1.  
2. <script type="text/javascript">
3.    var cSpeed=3;
4.    var cWidth=160;
5.    var cHeight=20;
6.    var cTotalFrames=12;
7.    var cFrameWidth=160;
8.    var cImageSrc='sprites.gif';
9.    
10.    var cImageTimeout=false;
11.    var cIndex=0;
12.    var cXpos=0;
13.    var cPreloaderTimeout=false;
14.    var SECONDS_BETWEEN_FRAMES=0;
15.    
16.    function startAnimation(){
17.      
18.       document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
19.       document.getElementById('loaderImage').style.width=cWidth+'px';
20.       document.getElementById('loaderImage').style.height=cHeight+'px';
21.      
22.       //FPS = Math.round(100/(maxSpeed+2-speed));
23.       FPS = Math.round(100/cSpeed);
24.       SECONDS_BETWEEN_FRAMES = 1 / FPS;
25.      
26.       cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);
27.      
28.    }
29.    
30.    function continueAnimation(){
31.      
32.       cXpos += cFrameWidth;
33.       //increase the index so we know which frame of our animation we are currently on
34.       cIndex += 1;
35.      
36.       //if our cIndex is higher than our total number of frames, we're at the end and should restart
37.       if (cIndex >= cTotalFrames) {
38.          cXpos =0;
39.          cIndex=0;
40.       }
41.      
42.       if(document.getElementById('loaderImage'))
43.          document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';
44.      
45.       cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
46.    }
47.    
48.    function stopAnimation(){//stops animation
49.       clearTimeout(cPreloaderTimeout);
50.       cPreloaderTimeout=false;
51.    }
52.    
53.    function imageLoader(s, fun)//Pre-loads the sprites image
54.    {
55.       clearTimeout(cImageTimeout);
56.       cImageTimeout=0;
57.       genImage = new Image();
58.       genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
59.       genImage.onerror=new Function('alert(\'Could not load the image\')');
60.       genImage.src=s;
61.    }
62.    
63.    //The following code starts the animation
64.    new imageLoader(cImageSrc, 'startAnimation()');
65. </script>

---------------------------------------------------------------------------------------------------------

Сдесь [ниже] внес небольшое извинения в html код.

Код (Text):

1.  
2. <input name="submit" id="submit" value="Load More" type="submit">
3.  
4. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
5. <div id="cosder"></div>
6.  
7. <script>
8. $("#submit").click(function() {
9.    $("#cosder").append('<div id="loaderImage"></div>');
10. });
11. </script>
12.  
13. и <div id="loaderImage"></div>

Дело в том что после добавления скриптом <div id="loaderImage"></div> этот див не хочет работать. То есть в диве не работает loading анимация.

 

)) Что нужно сделать что бы работало.