Question

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

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

我现在正在使用zepto.js而不是jQuery，而现在使用插件来解决以下错误。

未捕获的ReferenceError：未定义jQuery

如果我将})(jQuery);的所有插件更新为})(Zepto);，则会出现以下错误...

未捕获的TypeError：无法读取未定义的属性'：'

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

提前谢谢。

马特

Answer 1

导致错误的行似乎是：

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

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

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

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

Answer 2

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

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

zepto.js：Viewport和Lazyload插件？

2 个答案: