新版本的延迟加载？答案

【问题标题】：New version of Lazyload?新版本的延迟加载？
【发布时间】：2011-06-17 08:01:01
【问题描述】：

有谁知道 Applesiini 的 Lazyload 以外的其他插件？ http://www.appelsiini.net/projects/lazyload

他们已经停止了它的工作，所以它在新的浏览器中不起作用。我正在寻找替代方案。

我需要它做的只是在用户滚动到它之前不加载图像（但代码已经加载，所以没有 Ajax 加载新内容）。如果您认为编程很容易，我非常欢迎任何帮助。

谢谢。

【问题讨论】：

标签： jquery lazy-loading lazy-evaluation

【解决方案1】：

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

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

您可以通过将函数传递给animate 选项，随意为其设置动画。

看看这个test case on jsFiddle

【讨论】：

这是金子——你应该把它变成一个插件并获得疯狂的道具。
@PT，谢谢，但它已经是一个插件。你的意思是把它放在github上还是什么的？我可能会这样做:)

【解决方案2】：

您可能需要再次检查插件页面。它最近已更新。尤其是demo page which uses scrollstop event。默认情况下不提供此事件。代码摘自 James Padolseys 优秀的special scroll events for jQuery 文章。

【讨论】：

【解决方案3】：

当页面滚动经过特定元素时，使用此 jQuery 代码启动 Ajax 调用：

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

只需将#something 替换为要延迟加载的元素上方的元素的jQuery 选择器。

广告@m

【讨论】：

@adam ：谢谢。但我不想在页面上加载新图像。它们已经在那里，但我不想在用户滚动它们之前被加载。你知道我的意思吗？
在 .bind("scroll") 部分，您应该阅读 John Resig 的 "Learning from Twitter"。
@jensgram，我不喜欢使用间隔的 John Resigs 解决方案。最好在滚动事件中设置超时并检查该超时是否正在运行。在我的回答中实现了这种解决方案，它工作正常，只有当用户实际滚动时，没有后台轮询才会引入间隔。
@jensgram，只是为了补充我的最后一条评论。我觉得当前的节流解决方案不够充分（缓慢或缺乏），因此决定将我自己的 jQuery Throttle 插件组合在一起来实现节流/去抖动功能。