加载整个页面后，如何使用骨架.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);