[jQuery] 이미지 다시 로드 시키는 방법
이미지를 다시 읽는 기능입니다.
방법은 브라우저 캐쉬가 되어 있을 수 있으니 파일명 뒤쪽에 파라미터를 줘서 다시 읽도록 합니다.
여기에서는 캐쉬로 인해 나와야 될것이 나오지 않는것을 가정하고 만들었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
$(document).ready(function()
{
$("img").each(function (index, tag)
{
// console.log(index, tag);
let imgSrc = $(this).attr('src');
if ( imgSrc.indexOf('data:image') > -1 ) {
console.log( index, ' - ', $(this)[0].complete );
}
else {
// console.log(this);
// console.log( $(this)[0].complete );
if ( !$(this)[0].complete )
{
// var d = new Date();
// var newImgSrc = imgSrc + "?" + d.getTime();
var newImgSrc = imgSrc + "?rand=" + Math.random();
$(this).attr("src", newImgSrc);
console.log( newImgSrc );
}
}
// console.log( );
});
});
</script>
</body>
</html>
위에서 주소형태가 아닌 base654형태의 이미지는 처리 하지 않는것으로 하였습니다.
이미지가 모두 로드된 다음 실행 해야 되기 때문에 위를 그대로 사용하면 안되고 함수로 만든 다음 사용자 환경에 맞게 일부 수정하여 사용하면 됩니다.