懒加载的新版本？

Question

有没有人知道比Applesiini的Lazyload更好的插件？http://www.appelsiini.net/projects/lazyload他们已经停止更新，所以在新的浏览器中无法使用。我正在寻找替代方案。我需要它能够简单地实现在用户滚动到图片之前不加载图片（但代码已经加载，因此不会出现Ajax加载新内容）。如果你认为这很容易编程，我非常欢迎任何帮助。谢谢。

- denislexic

Answer 1

我决定试一试。从lazyload项目中借用了in-viewport检测，最终通过使用rel属性来指定图像的url，使其正常工作。

必须使用visiblity: hidden而不是display: none才能检测元素的位置，然后执行hide，删除visibility样式并使用fadeIn进行动画处理。

您可以通过将函数传递给animate选项来自定义动画效果。

请查看这个 jsFiddle上的测试案例

- mekwall

---

这是黄金——你应该将其转化为一个插件并获得疯狂的赞誉。 - cdcdcd

@PT，谢谢但它已经是一个插件了。你是说将其放在GitHub上或其他地方吗？我可能会这样做 :) - mekwall

Answer 2

你可能需要再次查看插件页面。它最近已经更新了，特别是使用scrollstop事件的演示页面。这个事件默认情况下不提供。代码取自James Padolsey出色的jQuery特殊滚动事件文章。

- Mika Tuupola

Answer 3

使用以下jQuery代码，当页面滚动到特定元素之后，发起Ajax调用：

$("body").bind("scroll touchstart touchend",function(){
    if($("body").scrollTop()>=$("#something").offset().top){
        alert("Put an Ajax call here...");
    }
});

只需用上想要延迟加载的元素上方的jQuery选择器替换#something即可。

Ad@m

- kirb

---

@adam: 谢谢你的回复。但是，我不想在页面上加载新的图片。它们已经存在，但我希望在用户滚动到它们时才加载。你明白我的意思吗？ - denislexic

在.bind("scroll")这一部分，你应该阅读John Resig的"Learning from Twitter"。 - jensgram

@jensgram，我不喜欢John Resig使用间隔的解决方案。最好在滚动事件中设置一个超时，并检查该超时是否正在运行。我在我的答案中实现了这种解决方案，它很好地工作，只有当用户实际滚动时才会触发，而不会引入后台轮询间隔。 - mekwall

@jensgram，补充一下我的上一个评论。我觉得当前的限流解决方案不够好（速度慢或者其他方面不足），所以决定自己编写一个 jQuery Throttle 插件来限制/防抖函数。 - mekwall