파비콘 돌아가게 만들기 ( 배열 or 변수)

이미지 폴더에 favicon 이미지여러장을 넣어준다.

 

---

html 파비콘 지정

 

  <link id="favicon" rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon_logo_01.ico?v=1"/>

 

?v=1 제거가능

 

여기선 실시간을 보여주는게 의미가 없기때문

 

 

제이쿼리에서 설정해주기위해 id 부여

---

제이쿼리 지정

 

 

 

 

attr 문자로 이름을 넣어서 href를 가져온다.

console.log($('#favicon').attr('href'));

 

 

 

---

방법 1. 배열로 설정해보기

 

 

$(function () {
  // attr 문자로 이름을 넣어서 href를 가져온다.
  // $('favicon').attr('href');

  var faviconPath = [
    'images/favicon/favicon_logo_01.ico',
    'images/favicon/favicon_logo_02.ico',
    'images/favicon/favicon_logo_03.ico',
    'images/favicon/favicon_logo_04.ico',
    'images/favicon/favicon_logo_05.ico',
    'images/favicon/favicon_logo_06.ico',
    'images/favicon/favicon_logo_07.ico',
  ];
  console.log($('#favicon').attr('href', faviconPath[1]));

---

변수적용

 

 

 

 

1번은 이미 html 에서 연결해놨기때문에

2번부터 증가시켜준다. 

 

제이쿼리는 0부터 시작하기때문에 2번째이미지는 1이된다

 

 

 

$(function () {
  // attr 문자로 이름을 넣어서 href를 가져온다.
  // $('favicon').attr('href');

  var faviconPath = [
    'images/favicon/favicon_logo_01.ico',
    'images/favicon/favicon_logo_02.ico',
    'images/favicon/favicon_logo_03.ico',
    'images/favicon/favicon_logo_04.ico',
    'images/favicon/favicon_logo_05.ico',
    'images/favicon/favicon_logo_06.ico',
    'images/favicon/favicon_logo_07.ico',
  ];
  var cnt = 0;

  setInterval(function () {
    cnt++;
    console.log(cnt);
    $('#favicon').attr('href', faviconPath[cnt]);
  }, 500);

카운트

 var cnt = 0; 

변수 설정

 

    cnt++;

증감연산자 사용

 

 

계속 돌아가긴하나 8번 이후로는 이미지가 없기에 7번이미지만 나오고 더이상 돌아가지않는다.

 

---

if 로 cnt 가 7이 됬을때 

값을 다시 0 으로 (처음이미지로) 돌아가서 반복 보여준다.

 

$(function () {
  // 배열로 가져옴
  var faviconPath = [
    'images/favicon/favicon_logo_01.ico',
    'images/favicon/favicon_logo_02.ico',
    'images/favicon/favicon_logo_03.ico',
    'images/favicon/favicon_logo_04.ico',
    'images/favicon/favicon_logo_05.ico',
    'images/favicon/favicon_logo_06.ico',
    'images/favicon/favicon_logo_07.ico',
  ];
  var cnt = 0;

  setInterval(function () {
    cnt++;

    if (cnt === 7) {
      cnt = 0;
    }
    // attr 문자로 이름을 넣어서 href를 가져온다.
    $('#favicon').attr('href', faviconPath[cnt]);
    console.log(cnt);
  }, 500);

 

정상작동 확인

---

 

변수로 한번더 감아 정리를 해준모습

$(function () {
  // 파비콘 애니메니션
  function animateFavicon() {
    var cnt = 0;
    var faviconPath = [
      'images/favicon/favicon_logo_01.ico',
      'images/favicon/favicon_logo_02.ico',
      'images/favicon/favicon_logo_03.ico',
      'images/favicon/favicon_logo_04.ico',
      'images/favicon/favicon_logo_05.ico',
      'images/favicon/favicon_logo_06.ico',
      'images/favicon/favicon_logo_07.ico',
    ];

    setInterval(function () {
      cnt++;

      if (cnt === 7) {
        cnt = 0;
      }
      // attr 문자로 이름을 넣어서 href를 가져온다.
      $('#favicon').attr('href', faviconPath[cnt]);
      console.log(cnt);
    }, 500);
  }
  animateFavicon();

---

방법 2 변수로 지정하기

 

 

$(function () {
  // 파비콘 애니메니션
  function animateFavicon() {
    var cnt = 0;

    setInterval(function () {
      cnt++;

      if (cnt === 7) {
        cnt = 0;
      }
      // attr 문자로 이름을 넣어서 href를 가져온다.
      $('#favicon').attr('href', 'images/favicon/favicon_logo_0' + (cnt + 1) + '.ico');
      console.log(cnt);
    }, 500);
  }
  animateFavicon();

 

 

*파비콘애니메이션은 모바일에선 반영불가