Share 5 practical JavaScript dynamic update icon plug-ins

• people who recently visited my blog are discovering that icons are dynamically loaded every time they are accessed, leaving a good user experience, so many people left me a message asking me how to implement this. Today I wrote such an article , share the implementation principles. If you have been using Gmail, you may find that in the lower right corner the" unread mail "icon is always dynamic. The updated icon. In this article, I found five plug-ins, which will help you update icons dynamically. You can use it for good user experience
• TinyconTinycon allows alarm bubbles to add and change the favicon image. Load dynamically and slowly in percentages,Supports mainstream browsers and usage methods,

•  1   <  Html  >  2       <  Head  >  3           <  Link  REL = "Icon"  Href  = "Favicon. ICO"  >  4           <  Title  > Tinycon </  Title  >  5           6           <  Script  SRC  = "../Tinycon. js" > </  Script  >  7           <  Script  >  8   (  Function  (){  9                   VaR  Count =   0  ; // Set the percentage for starting Loading  10   Setinterval (  Function  (){  11                       ++  Count;  12   Tinycon. setbubble (count ); 13   14   },  1000  );  15   })();  16           </  Script  >  17       </  Head  > 18       <  Body  >  19       </  Body  >  20   </  Html  > 

  Demo

  
  

• PieconImplement pie chart to make your!A tiny JavaScript library is used to dynamically generate a progress pie chart on your website. Usage
  

•  <  Script  SRC  = "Piecon. js"  > </  Script  >    <  Script  >  ( Function  (){  VaR  Count  =  85  ;  //  Set the loading percentage  Piecon. setoptions ({fallback:  ' Force  '  });  VaR  I  =  Setinterval (  Function  (){  If  (  ++ Count  >   100  ) {Piecon. Reset (); clearinterval (I );  Return   False  ;} Piecon. setprogress (count );},  250  );})(); 

  Piecon. setoptions ({Color:'# Ff0084', // pie chart color background: '# BBB', // empty pie chart color shadow: '# fff', // outer ring color fallback: false //In the titleSwitch the display Ratio(Possible values-True, false, 'force ')});
   

   

  
  

• Jquery icon notificationNotification of icon rendering of a super simple plug-in. You can set the number position, icon type, text and text shape color, usage

•  
  $. Faviconnotify = function (icon, num, Mypos, mybg, myfg) // icon-icon, num-number, Mypos-position, mybg-background color, myfg-font color, // example
  $. Faviconnotify ('/favicon. ICO', 67, 'br ',' #123456 ',' # abcdef ');
   

  Value range of Mypos: Random, left, right, up, down

   
  $. Faviconnotify ('/favicon. ICO ', 12, 'tr') // indicates that the ICO icon is used, and the number is 12. tr indicates top, right --- upper right $. faviconnotify ('/favicon. ICO ', 56, 'tl'); "// top left $. faviconnotify ('/favicon. ICO ', 34, 'br'); "// bottom right
  
   

   

  
  

   
  // Update icon $ ('link [rel $ = icon] '). replacewith (''); $ ('head'). append ($ ('<LinkREL= "Shortcut icon"Type= "Image/X-icon"/>'). ATTR ('href', canvas. todataurl ('image/PNG ')));
   

   

•  
• jquery icons fixed page elements of favicon. You can set switching between fixed elements.