Javascript-форум - jquery loaing Анимированный

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - jquery loaing Анимированный (https://javascript.ru/forum/jquery/39772-jquery-loaing-animirovannyjj.html)

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

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

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

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>

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

http://preloaders.net/ru/horizontal

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

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

дяди с тетями помогите... понятно ли я написал что я питаюсь сделать?

lemonl,
попробуйте строку 63 скрипта перенести на строку 8.5 хтмл :-?

Цитата:

Сообщение от рони (Сообщение 261818)

lemonl,
попробуйте строку 63 скрипта перенести на строку 8.5 хтмл :-?

Так уже делал не помогает

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>