Search code examples
jqueryviewportzeptolazy-loading

zepto.js: Viewport and Lazyload plugins?

I used to work with jQuery and was using

I'm now using zepto.js instead of jQuery and of Course now the plugins both through the following errors.

Uncaught ReferenceError: jQuery is not defined

If I update both plugins from })(jQuery); to })(Zepto); the following errors come up …

Uncaught TypeError: Cannot read property ':' of undefined

Any ideas on that? Is it possible to make those plugins work with Zepto? Isn't Zepto almost the same as Jquery just without older Browser Compatibility and additional Touch Events?

Thank you in advance.

Matt

Solution

  • The line that is causing the error appears to be:

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

    jQuery uses its own CSS-style selector evaluator called Sizzle. In addition to letting you use $('#id .cls1 .cls2, #otherid') and standard CSS pseudo-selectors, it supports extension with custom selectors like the built-in :visible selector or the :above-the-fold selector provided by this plugin.

    Since modern mobile browser support the native document.querySelectorAll function for CSS selection, a library like Sizzle isn't needed, saving a significant amount of JavaScript. (That's why we love Zepto.) The side effect is that these custom selectors aren't supported and $.expr doesn't exist. Any line that depends on these, including that line in the plugin will fail.

    The good news is that these are convenience selectors and you may just be able to cut them out of your script. If you don't want to find elements above and below the fold this way, you can just cut them out of the code. You will also need to address the line where the library calls $this.is(":visible") but other than that I don't really see anything too jQuery-specific.