单击时从外部 URL 刷新图像答案

【问题标题】：Refresh an image from external URL on click单击时从外部 URL 刷新图像
【发布时间】：2014-06-29 16:03:53
【问题描述】：

我有一个内置在 Ruby on Rails 中的仪表板，它从网络摄像头获取图像并以 jpg 格式提供它们。

我在每个图像上都有一个刷新按钮，并且希望能够单独刷新每个图像而不刷新整个页面。

 <% @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 实现这一目标？

感谢任何建议。

【问题讨论】：

api.jquery.com/jquery.ajax
只是刷新图片（不改变来源）更新它，还是每次都得到一个新的url？
刷新图像而不更改源确实会更新它我相信是的
我会发布一个考虑到这一点的答案:)

标签： javascript jquery image refresh partial-page-refresh

【解决方案1】：

由于您可以只更新图像而不需要新的 src url，因此您可以执行以下操作...

$("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 并在其末尾附加时间戳，从而导致重新加载（而不是仅使用相同的 url 并且可能不加载或从缓存加载）。

此外，您目前已将相同的 ID 应用于所有刷新链接。您应该为它们中的每一个应用一个唯一的 ID（只需为每个 ID 附加一个递增值）。

最后，我添加了e.stopPropagation()，这样外部链接就不会对您点击刷新链接做出反应，否则点击会冒泡，您最终会更改页面。

【讨论】：

【解决方案2】：

您要做的是异步更新图像。你可以使用 jQuery 的 .ajax()

你是这样做的：

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

【讨论】：