jQuery를 사용하여 서버에서 동일한 파일 이름의 이미지를 다시로드 할 수 있습니까?
예를 들어, 페이지에 이미지가 있지만 실제 이미지는 사용자 작업에 따라 변경 될 수 있습니다. 이는 파일 이름 변경이 아니라 실제 파일 자체를 의미합니다.
즉 :
- 기본 페이지에서 사용자보기 이미지
- 사용자가 새 이미지를 업로드
- 페이지의 기본 이미지가 변경되지 않습니다 (파일 이름이 동일하기 때문에 브라우저가 캐시 된 버전을 사용합니다)
아래 코드가 얼마나 자주 호출되는지에 관계없이 동일한 문제가 지속됩니다.
$("#myimg").attr("src", "/myimg.jpg");jQuery 문서에서 “로드”함수는 콜백 함수를 요소의 성공 / 완료로드에 바인딩하는 대신 이벤트를 발생시키는 기본 방법이 있다면 완벽합니다.
도움을 주시면 감사하겠습니다.
답변
브라우저가 이미지를 캐싱하는 것처럼 들립니다 (이제 질문에 썼습니다). 다음과 같은 추가 변수를 전달하여 브라우저가 이미지를 다시로드하도록 할 수 있습니다.
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());답변
아마도 가장 좋은 방법은 아니지만 JavaScript를 사용하여 이미지 URL에 타임 스탬프를 추가하여 과거 에이 문제를 해결했습니다.
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());다음에로드 할 때 타임 스탬프는 현재 시간으로 설정되고 URL이 다르므로 브라우저는 캐시 된 버전을 사용하는 대신 이미지에 대해 GET을 수행합니다.
답변
이것은 당신이 언급 한 두 가지 문제 중 하나 일 수 있습니다.
- 서버가 이미지를 캐시하고 있습니다
- jQuery가 실행되지 않거나 적어도 속성을 업데이트하지 않습니다
솔직히 말하면 2 위라고 생각합니다. 더 많은 jQuery를 볼 수 있다면 훨씬 쉬울 것입니다. 그러나 시작하려면 먼저 속성을 제거한 다음 다시 설정하십시오. 그것이 도움이되는지 확인하십시오.
$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");이것이 작동하더라도 최적이 아니기 때문에 일부 코드를 게시하십시오 (imo 🙂
답변
이미지 src를 자바 스크립트로 하드 코딩하는 것에 대해 걱정하지 않고 한 줄로 (아이디어에 대한 jeerose 감사) :
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());답변
바이 패스 캐싱 및 이미지 URL에 무한 타임 스탬프를 추가하지, 새로운 하나를 추가하기 전에 이전의 타임 스탬프를 제거, 이것은 내가했던 방법이다.
//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);
function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
//get the src attribute
source = jQuery(".xyro_refresh").attr("src");
//remove previously added timestamps
source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
//prep new src attribute by adding a timestamp
new_source = source + "?timestamp=" + new Date().getTime();
//alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
//set the new src attribute
jQuery(".xyro_refresh").attr("src", new_source);
}답변
이것은 잘 작동합니다! 그러나 src를 여러 번 다시로드하면 타임 스탬프도 URL에 연결됩니다. 나는 그것을 처리하기 위해 허용 된 답변을 수정했습니다.
$('#image_reload_button').on('click', function () {
var img = $('#your_image_selector');
var src = img.attr('src');
var i = src.indexOf('?dummy=');
src = i != -1 ? src.substring(0, i) : src;
var d = new Date();
img.attr('src', src + '?dummy=' + d.getTime());
});답변
이미지 컨테이너 html을 재설정 해 보셨습니까? 물론 캐싱하는 브라우저라면 도움이되지 않습니다.
function imageUploadComplete () {
$("#image_container").html("<img src='" + newImageUrl + "'>");
}