클릭시 외부 URL에서 이미지 새로 고침

Question

웹캠에서 이미지를 가져와 jpg 형식으로 제공하는 Ruby on Rails에 대시 보드가 내장되어 있습니다.

각 이미지에 새로 고침 버튼이 있으며 전체 페이지를 새로 고치지 않고 각 이미지를 개별적으로 새로 고침하고 싶습니다.

<% @shares.each do |camera| %> 
    <div class="col-md-4 col-sm-6 col-xs-12 cam-box"> 
     <a href="/cameras/<%= camera['id'] %>"> 
      <div id="cam-name"><h5><%= camera['name'] %></h5></div> 
       <img src="<%= camera['jpg'] %>" alt=""> 
       <a href="#" id="cam-refresh" class="refresh"><span class="glyphicon glyphicon-refresh"></span></a> 
      </div> 
     </a> 
    </div> 
<% end %> 

나는 이것을 Jquery로 어떻게 달성 할 수 있습니까?

의견을 보내주세요.

Answer 1

, 당신은 다음과 같은 작업을 수행 할 수 ...

$("a.refresh").on("click", function(e) { 
    e.stopPropagation(); 
    var $img = $(this).closest("img"); 
    var src = $img[0].src; 
    src = src.substr(0, src.search("?")) + "?" + new Date().getTime(); 
    $img[0].src = src; 
}); 

현재 이미지 src를 가져 와서 그 끝에 timestamp를 추가하면 재로드가 발생합니다 (동일한 URL을 사용하고 캐시에서로드 또는로드 할 수 없음).

또한 현재 모든 새로 고침 링크에 동일한 ID를 적용해야합니다. 각각에 고유 한 ID를 적용해야합니다 (각 ID에 증가 값을 추가하기 만하면됩니다). 외부 링크가 새로 고침 링크를 클릭하면 반응하지 않도록

마지막으로, 나는 그렇지 않으면 클릭 그냥 거품 위로 페이지를 변경 끝장 낸 것, e.stopPropagation()을 추가했다.

Answer 2

이미지를 비동기 적으로 업데이트하면됩니다. 다음을 사용하여이 작업을 수행 할 수 있습니다 jQuery의 .ajax() 여기

당신이 그것을 할 방법은 다음과 같습니다 당신은 단지 새로운 SRC URL을 필요없이 이미지를 업데이트 할 수 있기 때문에

// Set up an onClick listener for the refresh button 
// Make sure each refresh button has a class "cam-refresh" 
$(".cam-refresh").click(function() { 
    var $img = $(this).closest("img"), // Find the closest image 
     url = "filename.extension"; // The script that will return new image url 

    // Make a request to that URL to obtain a new src parameter 
    $.get(url, function() { 
     alert('Request has been submitted'); 
    }) 
    .done(function(data) { 
     alert("second success"); 
     $img.attr("src", data.src); 
    }) 
    .fail(function() { 
     alert("error"); 
    }) 
    .always(function() { 
     alert("finished"); 
    }); 
});