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

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

jQuery를 사용하여 서버에서 동일한 파일 이름의 이미지를 다시 로드할 수 있습니까?

예를 들어 페이지에 이미지가 있지만 실제 이미지는 사용자 작업에 따라 변경될 수 있습니다.이는 파일 이름이 변경되는 것이 아니라 실제 파일 자체를 의미합니다.

i:

• 사용자가 기본 페이지에서 이미지 보기
• 사용자가 새 이미지 업로드
• 페이지의 기본 이미지는 변경되지 않습니다(파일 이름이 동일하기 때문에 브라우저가 캐시된 버전을 사용합니다).

아래 코드가 호출되는 빈도에 관계없이 동일한 문제가 지속됩니다.

$("#myimg").attr("src", "/myimg.jpg");

jQuery 문서에서 "load" 함수는 콜백 함수를 요소의 성공적인/완전한 로드에 바인딩하는 대신 이벤트를 실행하는 기본 방법이 있으면 완벽합니다.

어떤 도움이든 대단히 감사합니다.

마치 브라우저가 이미지를 캐싱하는 것처럼 들립니다(질문에 기록한 내용을 이제 확인했습니다).다음과 같은 추가 변수를 전달하여 브라우저가 이미지를 다시 로드하도록 할 수 있습니다.

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 요청이 완료된 후 DOM에서 첫 번째 이미지를 제거하고 동일한 이름의 새 이미지를 삽입합니다.<img src=?1023>.

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

@kasper Taymans의 대답을 기반으로 합니다.

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>

이미지 소스를 여러 번 다시 로드해야 할 수 있습니다.Lodash를 통해 저에게 적합한 솔루션을 찾았습니다.

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

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

정확한 URL을 새로 고쳐야 하고 브라우저에 이미지가 캐시된 경우 AJAX와 요청 헤더를 사용하여 브라우저가 새 복사본을 다운로드하도록 할 수 있습니다.방법은 다음과 같습니다.

var img = $("#myimg");
var url = img.attr("src");
$.ajax({
    url: url,
    headers: { "Cache-Control": "no-cache" }
}).done(function(){
    // Refresh is complete, assign the image again
    img.attr("src", url);
});

쿼리 문자열에 토큰을 추가하면 새 이미지가 다운로드되지만 이전 URL의 캐시에 있는 이미지가 무효화되지 않아 이후 요청 시 이전 이미지가 계속 표시되기 때문에 다른 방법은 없었습니다.이전 URL만 브라우저로 전송되고 서버는 클라이언트에게 이미지를 캐시해야 하는 시간보다 더 오래 캐시하도록 지시했습니다.

그래도 이미지가 새로 고쳐지지 않으면 이 답변이 도움이 되는지 확인합니다.자세한 내용은 요청 헤더에 대한 설명서입니다.

HTML에서:

foreach (var item in images) {
   <Img src="@Url.Content(item.ImageUrl+"?"+DateTime.Now)" > 
}

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
    }

}

언급URL : https://stackoverflow.com/questions/2104949/how-to-reload-refresh-an-elementimage-in-jquery