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

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 + "'>");
}

때로는 실제로 같은 솔루션-

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

또한 src를 올바르게 새로 고치지 말고 시도해보십시오.

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

"#"을 구분자로 사용하면 유용 할 수 있습니다.

내 이미지는 "www"위의 "숨겨진"폴더에 보관되므로 로그인 한 사용자 만 액세스 할 수 있습니다. 이런 이유로 나는 평범한 것을 사용할 수 없지만 <img src=/somefolder/1023.jpg>서버에 요청을 <img src=?1023>보내고 이름 '1023'으로 유지 된 이미지를 다시 보내 응답합니다.

응용 프로그램은 이미지 자르기에 사용되므로 이미지를 자르기 위해 Ajax 요청을 한 후에는 서버의 컨텐츠로 변경되지만 원래 이름은 유지됩니다. 자르기 결과를 확인하기 위해 Ajax 요청이 완료된 후 첫 번째 이미지가 DOM에서 제거되고 같은 이름으로 새 이미지가 삽입됩니다 <img src=?1023>.

현금 인출을 피하기 위해 "#"앞에 "time"태그가 추가되어 요청에 추가됩니다 <img src=?1023#1467294764124>. 서버는 요청의 해시 부분을 자동으로 걸러 내고 '1023'으로 유지 된 이미지를 다시 보내 올바르게 응답합니다. 따라서 항상 많은 서버 측 디코딩없이 이미지의 마지막 버전을 얻습니다.

이미지 소스를 여러 번 다시로드해야 할 수도 있습니다. Lodash 에서 나에게 잘 맞는 솔루션을 찾았 습니다.

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

기존 타임 스탬프가 잘리고 새 타임 스탬프로 바뀝니다.

@kasper Taeymans의 답변을 기반으로합니다.

u 이미지를 다시로드 해야하는 경우 (src를 smth new로 바꾸지 마십시오) 다음을 시도하십시오.

$(function() {
  var img = $('#img');

  var refreshImg = function(img) {
    // the core of answer is 2 lines below
    var dummy = '?dummy=';
    img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());

    // remove call on production
    updateImgVisualizer();
  };


  // for display current img url in input
  // for sandbox only!
  var updateImgVisualizer = function() {
    $('#img-url').val(img.attr('src'));
  };

  // bind img reload on btn click
  $('.img-reloader').click(function() {
    refreshImg(img);
  });

  // remove call on production
  updateImgVisualizer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">


<p>
  <label>
    Current url of img:
    <input id="img-url" type="text" readonly style="width:500px">
  </label>
</p>

<p>
  <button class="img-reloader">Refresh</button>
</p>

나는 단순히 html로 이것을한다 :

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

그리고 코드 뒤에 이미지를 다음과 같이 다시로드하십시오.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}