图片的懒加载和卸载

Question

我有一个包含多个标签的HTML文件。

我希望在滚动事件上加载图像，并卸载不可见的图像。 就像在Amazon阅读器中，当您上下滚动时，框架中的当前图像会延迟加载。

我看到了很多LazyLoad工具，但它们中没有一个具有卸载功能。

- Inbal

---

那么你在这里寻找什么？ - Bibhas Debnath

问题是什么？ - Jai

你为什么想要卸载呢？ - Gupta.Swap

https://dev59.com/x2jWa4cB1Zd3GeqPt8RH - mplungjan

显然，我正在寻找一个插件或者代码来实现这个功能... @mplungjan，感谢您的参考，但是我不想隐藏内容，我想删除它。 - Inbal

@Gupta.Swap 我可能有非常大的文档（每一页都是图像），我希望能够获得良好的性能。在亚马逊上，当您打开具有许多页面的书时，每个页面都根据滚动条进行加载。 - Inbal

Answer 1

使用这个jquery插件：https://github.com/morr/jquery.appear，使用appear事件来显示图片，disappear事件来卸载图片。

$('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
});

- Eric Sanchez

---

那么你的测试结果呢？ - Eric Sanchez

嗨，Eric，我决定使用LazyLoad，并且我刚刚更改了此代码，以便进行“卸载”。无论如何，还是谢谢你的帮助！ :) - Inbal

@Inbal 我可以问一下你是如何修改lazyload插件的吗？我尝试将$ this.attr("src", settings.placeholder)添加到“if abovethefold”条件中，但似乎情况比那更加复杂...？更新似乎在图片被懒加载一次之后并没有被触发。 - Iain Mullan

@IainMullan 我绑定了另一个名为“disappear”的事件，它与“appear”相同，而不是“src”。我将src属性更改回动画gif。我的“update”函数如下：如果在上方或下方-触发消失，否则触发出现。 - Inbal

@Inbal，如果你还有的话，你介意分享一下你的appear.js分支吗？ - Sasha Fonseca