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.

• Prathap Gunasekaran: magento.stackexchange.com/questions/264940/…
• Soundararajan m: @PrathapGunasekaran, This function already working in Magento2.3.0 but 2.3.1 not working.
• Prathap Gunasekaran: Not sure about it, but with above information I could only sense there much be dependency issue
• Shoaib Munir: can you share the code where you called $(SOMETHING).lazyload
• Soundararajan m: Once include lazyload function then automaticallyy its working. 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 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"; });

• chanchal: Hi, I am facing the same issue using weltpixel theme lazyload extension. Can anyone tell where to include the above line to resolve the issue.
• Reginald Goolsby: @chanchal Sorry no one answered this for you. There's two files where this is missing. app/design/frontend/Smartwave/porto/Mageplaza_AjaxLayer/web/js/view/layer.js app/design/frontend/Smartwave/porto/Mageplaza_LayeredNavigation/web/js/view/layer.js

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