Question

我试图在popover中实现一个Lazy Load。对于lazyload，我使用Echo.js（http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/）

在表格中，我是这样的细胞：

<td>
  <a id='pop-ID' class='pop'>
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
  </a>
</td>

正如你所看到的，在我的单元格中，我可以看到加载的gif，并根据拇指的位置加载。效果很好

现在我想在弹出窗口中加载完整大小的图像我想使用完全相同的技术来避免加载我的页面的所有全尺寸图像

我保留相同的表/单元格，并在我的页面中添加一个隐藏的div，包括

<td>
  <a id='pop-ID' class='pop'>
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
  </a>
</td>

<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
  <div class='popTitle'>PopOver Title</div>
  <div class='popContent'>
    <img src='loader.gif' data-echo='image.jpg' class='img-rounded'>
  </div>
</div>

我被困在这里，我只看到popover中的加载gif，而不是image.jpg我应该能够看到

这是我用于popover的JS

$(".pop").each(function() {
  var $pElem= $(this);
  $pElem.popover(
    { 
      placement: 'left',
      trigger: 'hover',
      html : true,
      title: getPopTitle($pElem.attr("id")),
      content: getPopContent($pElem.attr("id"))
    }
  );
});

function getPopTitle(target) {
  return $("#" + target + "_content > div.popTitle").html();
};

function getPopContent(target) {
  return $("#" + target + "_content > div.popContent").html();
};

你看错了什么或我错过了什么？

这是我第一次尝试这个主题，所以我已经阅读了其他人的帖子，但我找不到在我的配置中重现结果的方法

Answer 1

使用上面的评论，我只是更改了与image.jpg相关的一行

<td>
  <a id='pop-ID' class='pop'>
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
  </a>
</td>

<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
  <div class='popTitle'>PopOver Title</div>
  <div class='popContent'>
    <img data-src='image.jpg' class='lazyload img-rounded'>
  </div>
</div>

现在它有效，谢谢！

我现在会尝试更广泛地使用lazysize来解决我的问题

在弹窗中使用延迟加载

1 个答案: