加載整個頁面后，如何使用骨架.js（或可能不需要它）重新呈現特定元素？

Question

說我的頁面已成功加載。 像這樣的文檔中有一個img元素：

<div class="pro_list_imgbox">
    <img src="http://XXXX.com/bazinga.jpg" />
</div>

而且我有如下的ribs.js代碼：

events: {
        'click .pro_list_imgbox': 'loadPic',
    },

loadPic: function (e) {
        var target = $(e.target),
            pic = target[0].nodeName === 'IMG' ? target : target.find('img');

        if (!pic.data('loadState')) {
            pic.attr('src', pic[0].src += '?t' + new Date().getTime());
        }

    },

我的問題是單擊該元素后如何重新呈現該img元素？ 我的loadPic函數可以工作嗎？ 帶有隨機數字作為src的后綴也許還有其他我應該做的事情？

Answer 1

看起來您正在從后端控制器中檢索圖像，並且該圖像已根據檢索時記錄的DateTime進行了標記。

要檢索相同的圖像，您必須保存用於檢索該圖像的源。 給定您已有的代碼，我想說，最直接的答案是使用$.data()將圖像源存儲在圖像的<img>元素中，像這樣

loadPic: function (e) {
  var target = $(e.target),
  pic = target[0].nodeName === 'IMG' ? target : target.find('img');

  if (!pic.data('loadState')) {
    var picSource = pic[0].src += '?t' + new Date().getTime();
    pic.data({ source: picSource });
    pic.attr('src', picSource);
  }
}

現在，單擊的<img>元素將具有該圖像的最后一個源字符串，可以使用調用該元素。

var imageSource = $('img-selector').data(source);