1

I tried to use jquery_lazyload on Magento 2 & couldn't get it to work. I loaded it using requirejs-config.js

var config = {
deps: [
    "js/my_script"
],
paths: {
    "LazyLoad": "//cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload"
},
shim: {
    'LazyLoad': {
        deps: ['jquery']
    }
}
};

& then I added my_script.js

define(["jquery","LazyLoad"], function($) {
"use strict";

$(document).ready(function($) {
    let images = document.querySelectorAll(".lazyload");
    lazyload(images);
});
return;
});

What I get is this error on console:

lazyload.js:78 Uncaught TypeError: Cannot set property 'settings' of undefined
at LazyLoad (lazyload.js:78)
at Object.execCb (require.js:1650)
at Module.check (require.js:866)
at Module.enable (require.js:1143)
at Module.init (require.js:774)
at callGetModule (require.js:1170)
at Object.completeLoad (require.js:1544)
at HTMLScriptElement.onScriptLoad (require.js:1671)

Update: The error occurs even when I'm not initializing the lazyload (something in the file itself breaks the requirejs).


UPDATE (solved)
It's working fine with the older version of lazyload (1.9.3), I got the error on v2.0.0. Still, I have no idea why it failed with the newer version though.

  • Try to call like new LazyLoad(images); instead of layzyload(images) – Rajeev K Tomy Mar 8 '18 at 12:47
0

Try this

app/code/Ravindra/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {
            'lazyloadjs': 'Ravindra_Modulename/js/lazyload.js'
        },
    shim: {
        'lazyloadjs': {
            deps: ['jquery']
        }
    }
};
  • Tried that & got the same error. – Pini Mar 8 '18 at 12:02
  • php bin/magento setup:static-content:deploy -f – Ravindrasinh Zala Mar 8 '18 at 12:11
  • rm -rf var/cache/* var/generation/* var/page_cache/* var/view_preprocessed/* – Ravindrasinh Zala Mar 8 '18 at 12:11
  • rm -rf var/cache/* generated/* – Ravindrasinh Zala Mar 8 '18 at 12:11
  • The error occures even when I'm not initializing the lazyload (something in the file itself breaks the requirejs). – Pini Mar 8 '18 at 13:18
0

requirejs-config.js

var config = {
    paths: {            
         'lazyload': "Vendor_Modulename/js/myfile"
      },   
    shim: {
    'lazyload': {
        deps: ['jquery']
    }
  }
} 

You can use anywhere in your template file by below method

<srcipt>
 require(["jquery","lazyload"],function($,myfile){
     $(document).ready(function(){
        //call your js here...
     })
 })
</script>
  • Tried that & got the same error. – Pini Mar 8 '18 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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