blackbird/external-resources-loader

Easily lazy load scripts and styles by url

Installs: 1 988

Dependents: 2

Suggesters: 0

Security: 0

Stars: 5

Watchers: 2

Forks: 0

Open Issues: 0

Language:HTML

Type:magento2-module

1.0.6 2024-07-01 15:41 UTC

This package is auto-updated.

Last update: 2024-10-31 00:23:45 UTC


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') ?>")