[HTML] 웹페이지 로딩시, 항상 이미지를 새로 불러오는 옵션

HTML 페이지에서 이미지를 항상 새로 불러오려면 이미지 URL에 고유한 파라미터를 추가할 수 있습니다. 
이 방법은 브라우저 캐싱을 우회하므로, 매번 페이지를 로드할 때마다 이미지가 새로 불러와집니다.

<img src="image.jpg?time=" alt="My Image">
 

여기서 는 현재 시간의 타임스탬프나 고유한 값을 채우는 것이다.

Javascript를 사용하면 이미지 태그에 동적으로 이 파라미터를 추가할 수 있다.
예를 들면, 아래와 같이 작성할 수 있다.

<script>
   window.onload = function()
    { var imgs = document.getElementsByTagName('img');
      var timestamp = new Date().getTime();
 
      for (var i = 0, l = imgs.length; i < l; i++) {
         imgs[i].src = imgs[i].src + "?time=" + timestamp;
      }
    } 
</script>

위의 스크립트는 페이지 로드 시 모든 이미지의 src에 고유한 타임스탬프를 추가한다.
이렇게 하면 브라우저는 이미지를 새로 불러와야하므로, 캐시된 이미지를 사용하지 않다.

이 방법은 이미지를 항상 새로 불러오도록 강제하지만, 페이지 로드 시간이 늘어날 수 있음을 유의해야 한다.
이미지가 크거나 많은 경우, 이 방법을 사용하면 사용자의 경험이 떨어질 수 있다.
따라서 실제 상황에 따라 적절히 사용해야 한다.

HTML 페이지에서 이미지를 항상 새로 불러오려면 이미지 URL에 고유한 파라미터를 추가할 수 있다.  이 방법은 브라우저 캐싱을 우회하므로, 매번 페이지를 로드할 때마다 이미지가 새로 불러와진다 .
htmlCopy code
<img src='image.jpg?time=' alt='My Image'>
여기서 는 현재 시간의 타임스탬프나 고유한 값을 채우는 것이다. 
Javascript를 사용하면 이미지 태그에 동적으로 이 파라미터를 추가할 수 있다.  예를 들면, 아래와 같이 작성할 수 있다. 
htmlCopy code
<script>

   window.onload = function()
    {
    var imgs = document.getElementsByTagName('img');
    
      var timestamp = new Date().getTime();
    

      for (var i = 0, l = imgs.length; i < l; i++) {

         imgs[i].src = imgs[i].src + '?time=' + timestamp;

      }

    } 
</script>
위의 스크립트는 페이지 로드 시 모든 이미지의 src에 고유한 타임스탬프를 추가한다.  이렇게 하면 브라우저는 이미지를 새로 불러와야하므로, 캐시된 이미지를 사용하지 않다. 
이 방법은 이미지를 항상 새로 불러오도록 강제하지만, 페이지 로드 시간이 늘어날 수 있음을 유의해야 한다. 이미지가 크거나 많은 경우, 이 방법을 사용하면 사용자의 경험이 떨어질 수 있다.  따라서 실제 상황에 따라 적절히 사용해야 한다.