blackbird / external-resources-loader
Easily lazy load scripts and styles by url
Installs: 2 128
Dependents: 2
Suggesters: 0
Security: 0
Stars: 5
Watchers: 2
Forks: 0
Open Issues: 0
Language:HTML
Type:magento2-module
Requires
- php: >=7.4.0
- magento/framework: *
README
This tiny Magento 2 module will allow you to easily lazy load scripts and styles by url.
Installation
composer require blackbird/external-resources-loader
php bin/magento setup:upgrade
Usage
Load script :
blackbird.loadExternalResource('https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js') .then(() => /* code which is executed after the lib has loaded */)
Load style :
blackbird.loadExternalResource('https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css') .then(() => /* code which is executed after the style has loaded */)
Load multiple related scripts and styles :
Promise.all([ blackbird.loadExternalResource('https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js'), blackbird.loadExternalResource('https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css') ]).then(() => /* code which is executed after the style and the lib has loaded */)
Troubleshooting
The loadExternalResource
method will load a script or a style depending on the url extension.
If the url doesn't end by .js
or .css
, you could lazy load resource using one of these 2 methods :
loadExternalScript
: load resource from a url that provides javascript contentloadExternalStyle
: load resource from a url that provides css content
For instance :
blackbird.loadExternalScript("<?= $block->getViewFileUrl('js/my-script') ?>")