Using jquery_lazyload on Magento 2

I tried to use jquery_lazyload on Magento 2 & cant'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 occures even when I'm not initializing the lazyload (something in the file itself breaks the requirejs).

UPDATE (solved)

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

edited Mar 8 '18 at 13:31

asked Mar 8 '18 at 11:31

Pini

385213

bumped to the homepage by Community♦ 7 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

Try to call like new LazyLoad(images); instead of layzyload(images)

– Rajeev K Tomy
Mar 8 '18 at 12:47

add a comment |

I tried to use jquery_lazyload on Magento 2 & cant'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 occures even when I'm not initializing the lazyload (something in the file itself breaks the requirejs).

UPDATE (solved)

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

edited Mar 8 '18 at 13:31

asked Mar 8 '18 at 11:31

Pini

385213

bumped to the homepage by Community♦ 7 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

Try to call like new LazyLoad(images); instead of layzyload(images)

– Rajeev K Tomy
Mar 8 '18 at 12:47

add a comment |

I tried to use jquery_lazyload on Magento 2 & cant'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 occures even when I'm not initializing the lazyload (something in the file itself breaks the requirejs).

UPDATE (solved)

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

edited Mar 8 '18 at 13:31

asked Mar 8 '18 at 11:31

Pini

385213

I tried to use jquery_lazyload on Magento 2 & cant'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 occures even when I'm not initializing the lazyload (something in the file itself breaks the requirejs).

UPDATE (solved)

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

magento2.2 requirejs lazyload

edited Mar 8 '18 at 13:31

asked Mar 8 '18 at 11:31

Pini

385213

edited Mar 8 '18 at 13:31

asked Mar 8 '18 at 11:31

Pini

385213

edited Mar 8 '18 at 13:31

asked Mar 8 '18 at 11:31

Pini

385213

asked Mar 8 '18 at 11:31

Pini

385213

asked Mar 8 '18 at 11:31

Pini

385213

bumped to the homepage by Community♦ 7 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

bumped to the homepage by Community♦ 7 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

Try to call like new LazyLoad(images); instead of layzyload(images)

– Rajeev K Tomy
Mar 8 '18 at 12:47

add a comment |

Try to call like new LazyLoad(images); instead of layzyload(images)

– Rajeev K Tomy
Mar 8 '18 at 12:47

Try to call like new LazyLoad(images); instead of layzyload(images)

– Rajeev K Tomy
Mar 8 '18 at 12:47

add a comment |

2 Answers
2

active

oldest

votes

Try this

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

var config = {

    paths: {

            'lazyloadjs': 'Ravindra_Modulename/js/lazyload.js'

        },

    shim: {

        'lazyloadjs': {

            deps: ['jquery']

        }

    }

};

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

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

add a comment |

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>

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

Tried that & got the same error.

– Pini
Mar 8 '18 at 12:01

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f216565%2fusing-jquery-lazyload-on-magento-2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Try this

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

var config = {

    paths: {

            'lazyloadjs': 'Ravindra_Modulename/js/lazyload.js'

        },

    shim: {

        'lazyloadjs': {

            deps: ['jquery']

        }

    }

};

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

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

add a comment |

Try this

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

var config = {

    paths: {

            'lazyloadjs': 'Ravindra_Modulename/js/lazyload.js'

        },

    shim: {

        'lazyloadjs': {

            deps: ['jquery']

        }

    }

};

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

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

add a comment |

Try this

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

var config = {

    paths: {

            'lazyloadjs': 'Ravindra_Modulename/js/lazyload.js'

        },

    shim: {

        'lazyloadjs': {

            deps: ['jquery']

        }

    }

};

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

Try this

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

var config = {

    paths: {

            'lazyloadjs': 'Ravindra_Modulename/js/lazyload.js'

        },

    shim: {

        'lazyloadjs': {

            deps: ['jquery']

        }

    }

};

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

answered Mar 8 '18 at 11:35

Ravindrasinh Zala

1,261322

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

add a comment |

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

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

add a comment |

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>

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

Tried that & got the same error.

– Pini
Mar 8 '18 at 12:01

add a comment |

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>

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

Tried that & got the same error.

– Pini
Mar 8 '18 at 12:01

add a comment |

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>

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

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>

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

answered Mar 8 '18 at 11:40

Kishan Patadia

3,7891924

Tried that & got the same error.

– Pini
Mar 8 '18 at 12:01

add a comment |

Tried that & got the same error.

– Pini
Mar 8 '18 at 12:01

Tried that & got the same error.

– Pini
Mar 8 '18 at 12:01

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj