jqueryjquery-lazyload

Unveil lazy loading plugin error


I'm trying to use the unveil plugin in my c# .net mvc project. I get this error.

jquery.unveil.js:13 Uncaught TypeError: Cannot read property 'fn' of undefined

The jquery.unveil.js script file is in the Scripts folder. And below is my View.

<div class="images">
    <img...
    <img...
    <img...
</div>

<script src="~/Scripts/jquery.unveil.js"></script>

    @Scripts.Render("~/bundles/jquery")

    <script>
        (function ($) {   
            $('img').unveil();
        });
</script>

I also tried using

$( document ).ready(function() {
  $('img').unveil();
  });

and got the errors:

jquery.unveil.js:13 Uncaught TypeError: Cannot read property 'fn' of undefined
    at jquery.unveil.js:13
    at jquery.unveil.js:56


jquery-1.10.2.js:3062 Uncaught TypeError: $(...).unveil is not a function
    at HTMLDocument.<anonymous> (UniMedEd:121)
    at fire (jquery-1.10.2.js:3062)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
    at Function.ready (jquery-1.10.2.js:447)
    at HTMLDocument.completed (jquery-1.10.2.js:118)

The second error i'm assuming even when document.ready is called the unveil.js file hasn't been loaded.

Any advice would be great.

Thanks.


Solution

  • jquery.unveil.js:13 Uncaught TypeError: Cannot read property 'fn' of undefined
        at jquery.unveil.js:13
        at jquery.unveil.js:56
    
    L13:   $.fn.unveil = function(threshold, callback) {
    L56:   })(window.jQuery || window.Zepto);
    

    jQuery is undefined.

    You should include jQuery before including any jQuery plugin:

    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery.unveil.js"></script>
    <script>
        (function ($) {   
            $('img').unveil();
        });
    </script>