zepto.js：视口和延迟加载插件？

Posted 2023-02-22

【中文标题】zepto.js：视口和延迟加载插件？

【英文标题】：zepto.js: Viewport and Lazyload plugins?

【发布时间】：2012-07-03 20:00:53

【问题描述】：

我曾经使用 jQuery 并且正在使用

jQuery LazyLoad Pluginhttp://www.appelsiini.net/projects/lazyload jQuery Viewport Pluginhttp://www.appelsiini.net/projects/viewport

我现在使用 zepto.js 而不是 jQuery，当然现在插件都出现以下错误。

Uncaught ReferenceError: jQuery is not defined

如果我将两个插件从 )(jQuery); 更新为 )(Zepto);，则会出现以下错误……

未捕获的类型错误：无法读取未定义的属性 ':'

对此有什么想法吗？是否可以使这些插件与 Zepto 一起使用？ Zepto 不是与 Jquery 几乎相同，只是没有旧的浏览器兼容性和额外的触摸事件吗？

提前谢谢你。

马特

【问题讨论】：

或者有人知道图像的无依赖延迟加载 javascript 吗？我只想为我的网站使用一个良好且有效的延迟加载脚本，并使用 zepto 而不是 jquery。

因为我也和 Zepto 一起工作，所以我会看看。无论如何，视口选择器还是有些人喜欢的，并且便利的方法将从延迟加载中删除，因为我觉得大多数人不使用它们（而且它们在视口插件中仍然可用）。

【参考方案1】：

导致错误的行似乎是：

.extend($.expr[':'], 

jQuery 使用自己的 CSS 样式选择器评估器，称为 Sizzle。除了让您使用$('#id .cls1 .cls2, #otherid') 和标准CSS 伪选择器外，它还支持使用自定义选择器进行扩展，例如内置的:visible 选择器或此插件提供的:above-the-fold 选择器。

由于现代移动浏览器支持原生 document.querySelectorAll 函数进行 CSS 选择，因此不需要像 Sizzle 这样的库，从而节省了大量 JavaScript。 （这就是我们喜欢 Zepto 的原因。）副作用是这些自定义选择器不受支持，$.expr 不存在。任何依赖于这些的行，包括插件中的那一行都会失败。

好消息是这些是便利的选择器，您可以将它们从您的脚本中删除。如果您不想以这种方式查找折叠上方和下方的元素，则可以将它们从代码中删除。您还需要解决库调用$this.is(":visible") 的行，但除此之外，我真的没有看到任何与 jQuery 相关的内容。

【参考方案2】：

你还需要处理 $window.scrollLeft()，它在 Zepto 中没有实现（你可以使用 window.pageXOffset）。

我已经在我的分支上实现了完全的 Zepto 兼容性：https://github.com/adamvert/jquery_lazyload