Lazy load Js not working in Magento2.3.1 Version

Question

We use Magento2.3.1, in product list page showing error like

Uncaught TypeError: $(...).lazyload is not a function.

While using Porto theme of Magento 2.x.

Answer 1

To complete this Answer. Soundararajan m is correct but he doesn't specify which files to update. They're located at

app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js

Update the top of the layer.js file to this

define([
    'jquery',
    'Mageplaza_AjaxLayer/js/action/submit-filter',
    'Magento_Catalog/js/price-utils',
    'jquery/ui',
    'accordion',
    'js/jquery.lazyload',
    'productListToolbarForm'
], function ($, submitFilterAction, ultil) {
...

This will solve this error.

Answer 2

I got solution for this question after refer my code.

Once include lazyload function then automaticallyy its working. File Location:

app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js 

app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js

define([ 'jquery', 'Mageplaza_AjaxLayer/js/action/submit-filter', 'Magento_Catalog/js/price-utils', 'jquery/ui', 'accordion', 'js/jquery.lazyload', 'productListToolbarForm' ], function ($, submitFilterAction, ultil) { "use strict"; });

Answer 3

In you extension add below js:

view/frontend/web/js/jquery.lazyload.js

view/frontend/web/js/lazyload.js

now configure requirejs:

view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            LazyLoad: 'Vendor_Module/js/lazyload'
        }
    }
};

Add below code in phtml file

<script type="text/x-magento-init">
{
    "*": {
        "LazyLoad": {}
    }
}
</script>

You can try this extension as well: https://www.weltpixel.com/magento-2-lazy-load-product-extension.html