[jquery] jQuery에서 요소 (이미지)를 다시로드 / 새로 고치는 방법

Program / 글쓴이

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을 수행합니다.

답변

이것은 당신이 언급 한 두 가지 문제 중 하나 일 수 있습니다.

  1. 서버가 이미지를 캐시하고 있습니다
  2. 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 + "'>");
}