Показать сообщение отдельно
  #1 (permalink)  
Старый 11.07.2013, 13:41
Новичок на форуме
Отправить личное сообщение для lemonl Посмотреть профиль Найти все сообщения от lemonl
 
Регистрация: 11.07.2013
Сообщений: 6

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>
Ответить с цитированием