blackbird/external-resources-loader

Easily lazy load scripts and styles by url

1.0.3 2024-04-11 09:06 UTC

Requires

• php: >=7.4.0
• magento/framework: *

MIT

• Blackbird Agency

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 content
• loadExternalStyle : load resource from a url that provides css content

For instance :

blackbird.loadExternalScript("<?= $block->getViewFileUrl('js/my-script') ?>")