[JQUERY] 다시로드하는 방법 / jQuery를의 요소 (이미지)를 새로 고침

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

해결법

1. ---

   1.그것이 (내가 지금 당신은 당신의 질문에 쓴 통지) 이미지를 캐싱 브라우저처럼 소리가 난다. 당신과 같이 별도의 변수를 전달하여 이미지를 다시로드 브라우저를 강제 할 수 있습니다 :

   그것이 (내가 지금 당신은 당신의 질문에 쓴 통지) 이미지를 캐싱 브라우저처럼 소리가 난다. 당신과 같이 별도의 변수를 전달하여 이미지를 다시로드 브라우저를 강제 할 수 있습니다 :

   d = new Date();
   $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
   

2. ---

   2.아마 가장 좋은 방법은 아니지만, 단순히 자바 스크립트를 사용하여 이미지의 URL에 타임 스탬프를 추가하여 과거에이 문제를 해결했습니다 :

   아마 가장 좋은 방법은 아니지만, 단순히 자바 스크립트를 사용하여 이미지의 URL에 타임 스탬프를 추가하여 과거에이 문제를 해결했습니다 :

   $("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());
   

   다음에 그것을로드, 타임 스탬프는 현재 시간으로 설정하고 브라우저 대신 캐시 된 버전을 사용하는 이미지의 GET을 수행하도록 URL은 다르다.

3. ---

   3.이것은 당신이 자신을 언급 두 가지 문제 중 하나가 될 수 있습니다.

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

   솔직히 말해서, 나는 두 번째 생각합니다. 우리가 좀 더 jQuery를 볼 수 있다면 훨씬 더 쉽게 될 것이다. 그러나 시작을 위해 먼저 속성을 제거하려고하고 다시 설정합니다. 이 도움이 경우 그냥 볼 수 있습니다 :

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

   비록이 작품 경우이 IMO, 최적되지 않기 때문에, 일부 코드를 게시 :-)

4. ---

   4.자바 스크립트로 아이디어 jeerose에 (덕분에 이미지 SRC를 하드 코딩에 대한 걱정 하나 개의 라인 :

   자바 스크립트로 아이디어 jeerose에 (덕분에 이미지 SRC를 하드 코딩에 대한 걱정 하나 개의 라인 :

   $("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
   

5. ---

   5.바이 패스 캐싱 및 이미지 URL에 무한 타임 스탬프를 추가 피하기 위해, 새로운 하나를 추가하기 전에 이전의 타임 스탬프를 제거, 이것은 내가했던 방법이다.

   바이 패스 캐싱 및 이미지 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);
   }
   

6. ---

   6.이 위대한 작품! 당신은 SRC를 여러 번 다시로드 그러나 경우, 타임 스탬프가 너무 URL에 연결된됩니다. 나는 그 다루는 허용 대답을 수정했습니다.

   이 위대한 작품! 당신은 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());
   });
   

7. ---

   7.당신은 이미지 컨테이너 HTML을 다시 시도했습니다. 물론 그 다음이없는 것 도움을 캐싱 브라우저의 경우.

   당신은 이미지 컨테이너 HTML을 다시 시도했습니다. 물론 그 다음이없는 것 도움을 캐싱 브라우저의 경우.

   function imageUploadComplete () {
       $("#image_container").html("<img src='" + newImageUrl + "'>");
   }
   

8. ---

   8.언젠가 실제로 솔루션과 같은 -

   언젠가 실제로 솔루션과 같은 -

   $("#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));
   

9. ---

   9.만 로그인 한 사용자는 그들에 액세스 할 수있는, 그래서 내 이미지는 'www'를 위의 "숨겨진"폴더에 보관됩니다. 이런 이유로 내가 사용할 수 없습니다 보통 하지만 같은 서버에 요청을 보내고는 '1023'의 이름으로 유지 이미지를 다시 전송하여 응답합니다.

   만 로그인 한 사용자는 그들에 액세스 할 수있는, 그래서 내 이미지는 'www'를 위의 "숨겨진"폴더에 보관됩니다. 이런 이유로 내가 사용할 수 없습니다 보통 하지만 같은 서버에 요청을 보내고는 '1023'의 이름으로 유지 이미지를 다시 전송하여 응답합니다.

   응용 프로그램은 아약스 요청이 이미지를 자르 너무 후, 이미지 자르기에 사용되는, 서버의 내용으로 변경되었지만 원래 이름을 유지한다. 아약스 요청이 완료된 후 수확 한 결과를보고하기 위해, 첫 번째 이미지는 DOM에서 제거되고 새로운 이미지가 동일한 이름 으로 삽입된다.

   나는 그것이 처럼 될 수 있도록 "시간"태그 "#"을 앞에 추가 요청에 추가 현금화하지 않도록합니다. 서버는 자동으로 '1023'로 유지 내 이미지를 다시 보내 올바르게 요청 및 응답의 해시 부분을 필터링합니다. 따라서 나는 항상 많은 서버 측 디코딩하지 않고 이미지의 마지막 버전을.

10. ---

    10.나는 이미지 소스를 여러 번 다시로드 할 수 있습니다. 나를 위해 잘 작동 Lodash와 해결책을 발견 :

    나는 이미지 소스를 여러 번 다시로드 할 수 있습니다. 나를 위해 잘 작동 Lodash와 해결책을 발견 :

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

    기존의 타임 스탬프는 절단하고 새 것으로 교체됩니다.

11. ---

    11.@kasper Taeymans '답변을 기준으로합니다.

    @kasper Taeymans '답변을 기준으로합니다.

    u는 단순히 다시로드 이미지가 필요한 경우 (떨어지게 새와 그것의 SRC를 대체하지), 시도 :

    () {(기능 $ VAR IMG = $ ( '#의 IMG'); VAR refreshImg = 함수 (IMG) { // 대답의 핵심은 아래의 2 개 라인입니다 VAR 더미 = '더미 =?'; img.attr ( 'SRC'img.attr ( 'SRC') 스플릿 (더미) [0] + 더미 + (새 날짜 ()) 다음 getTime ()..); 생산에 // 제거 호출 updateImgVisualizer (); }; // 입력의 표시 현재의 img URL에 대한 // 샌드 박스 만! VAR updateImgVisualizer = 함수 () { $ ( '# IMG-URL') 발 (img.attr ( 'SRC')).; }; BTN 클릭에 // 바인딩 IMG 다시로드 $ ( '. IMG-장전'). ((클릭 기능) { refreshImg (IMG); }); 생산에 // 제거 호출 updateImgVisualizer (); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    <레이블> IMG의 현재 URL : <입력 ID = "IMG-URL"유형 = "텍스트"읽기 전용 스타일 = "너비 : 500 픽셀">

    <버튼 클래스 = "IMG-장전"> 새로 고침

12. ---

    12.

    <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
        }
    

    }

from https://stackoverflow.com/questions/2104949/how-to-reload-refresh-an-elementimage-in-jquery by cc-by-sa and MIT license