1

I am getting below error: Uncaught TypeError: $(...).unveil is not a function stuck in this.

<script type="text/javascript">
    require([
        'jquery',
        'jquerypopper',
        'jqueryunveil',
        'jquerybootstrap',
        'yttheme',
        'domReady!'
    ], function ($, Popper) {
        <?php if($enableLadyLoading){ ?>
        function _runLazyLoad() {
            $("img.lazyload").unveil(0, function () {
                $(this).load(function () {
                    this.classList.remove("lazyload");
                });
            });
        }

        /*_runLazyLoad();
        $(document).on("afterAjaxLazyLoad", function (event) {
            _runLazyLoad();
        });*/

        <?php } ?>
    });
</script>
3
  • share code where you have included unvail.js file Aug 22, 2019 at 11:58
  • Have you tried 'js/jquery.unveil' instead of just 'jqueryunveil'? You may also need to "shim" unveil using requirejs.config() with "js/jquery.unveil": {deps: ["jquery"]}. Aug 22, 2019 at 14:32
  • i tried but no luck
    – imtiazau
    Aug 23, 2019 at 5:07

1 Answer 1

1

I was facing the same issue on the SM theme. After debugging the code, I found that the function is not called sometimes, which is why it throws an error. However, after moving the external JS code to my phtml, it's now working correctly.

I hope it will work for you.

<script>
    require(["jquery"], function ($) {;
        (function ($) {

            $.fn.unveil = function (threshold, callback) {

                var $w = $(window),
                    th = threshold || 0,
                    retina = window.devicePixelRatio > 1,
                    attrib = retina ? "data-src-retina" : "data-src",
                    images = this,
                    loaded;

                this.one("unveil", function () {
                    var source = this.getAttribute(attrib);
                    source = source || this.getAttribute("data-src");
                    if (source) {
                        this.setAttribute("src", source);
                        if (typeof callback === "function") callback.call(this);
                    }
                });

                function unveil() {
                    var inview = images.filter(function () {
                        var $e = $(this);
                        if ($e.is(":hidden")) return;

                        var wt = $w.scrollTop(),
                            wb = wt + $w.height(),
                            et = $e.offset().top,
                            eb = et + $e.height();

                        return eb >= wt - th && et <= wb + th;
                    });

                    loaded = inview.trigger("unveil");
                    images = images.not(loaded);
                }

                $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

                unveil();

                return this;

            };

        })(window.jQuery || window.Zepto);
    });
</script>
<script type="text/javascript">
    require([
        'jquery',
        'jquerywow',
        'jquerybootstrap',
        'yttheme',
        'domReady!',
    ], function ($,WOW) {
        wow = new WOW();
        wow.init();
        
        <?php if($enableLadyLoading){ ?>
            function _runLazyLoad () {              
                 $("img.lazyload").unveil(0,function(){
                    $(this).on('load', function() {
                        this.classList.remove("lazyload");
                    });
                });
            }
            _runLazyLoad();
            $(document).on("afterAjaxLazyLoad", function( event) {
                _runLazyLoad();
            });
           
        <?php } ?>
    });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.