Usage

Usage Examples

Explore various implementation scenarios to grasp the versatility of Scripts Loader:

Scenario 1: Basic Script Loading

Learn how to load simple scripts using the Scripts Loader:

const myScripts = [
  { name: "jquery", sources: ["https://code.jquery.com/jquery-3.7.1.min.js"] },
  { name: "my-custom-script", sources: ["/path/to/my-script.js"], dependencies: ["jquery"] }
];

$ls(myScripts); // Load using document injection.
// Or, $ls.document(myScripts);

Scenario 2: Advanced Dependency Handling

Discover advanced techniques for managing script dependencies:

const myScripts = [
  { name: "main-script", sources: ["https://example.com/main.js"] },
  { name: "dependency-1", sources: ["https://example.com/dependency-1.js"] },
  { name: "dependency-2", sources: ["https://example.com/dependency-2.js"], dependencies: ["dependency-1"] }
];

$ls.ajax(myScripts); // Load using AJAX fetching

Scenario 3: Conditional Loading

Explore conditional loading based on certain criteria:

const isMobile = /* your mobile detection logic */;
const scriptToLoad = isMobile ? "mobile-script" : "desktop-script";

const myScripts = [
  { name: "mobile-script", sources: ["https://example.com/mobile.js"] },
  { name: "desktop-script", sources: ["https://example.com/desktop.js"] }
];

$ls(myScripts.find(script => script.name === scriptToLoad));

Scenario 4: Dynamically Loading Libraries

Demonstrate how to dynamically load libraries based on user actions:

const loadExternalLibrary = (libraryName) => {
  const scripts = [ { name: libraryName, source: `https://example.com/${libraryName}.js` } ];
  $ls(scripts);
};

// Example usage
button.addEventListener("click", () => {
  loadExternalLibrary("my-library");
});

Scenario 5: Lazy Loading on Scroll

Demonstrate lazy loading of scripts based on scrolling behavior:

window.addEventListener('scroll', () => {
  const scriptPosition = document.getElementById('target-script').getBoundingClientRect().top;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  
  if (scriptPosition < viewportHeight) {
    const myScripts = [{ name: 'lazy-script', sources: ['https://example.com/lazy-script.js'] }];
    $ls(myScripts);
  }
});

Scenario 6: Multi-Domain Script Loading

Load scripts from multiple domains for enhanced performance:

const scripts = [
  { name: 'script-1', sources: ['https://cdn1.example.com/script-1.js'] },
  { name: 'script-2', sources: ['https://cdn2.example.com/script-2.js'] },
  { name: 'script-3', sources: ['https://cdn3.example.com/script-3.js'] }
];

$ls(scripts);

Scenario 7: Dynamic Script Versioning

Showcase how to dynamically manage script versions:

const currentVersion = '1.2.0';
const script = { name: 'dynamic-version-script', sources: [`https://example.com/script-${currentVersion}.js`] };
$ls(script);

Scenario 8: Script Group Loading

Load scripts in groups based on priority:

const highPriorityScripts = [{ name: 'high-priority-script', sources: ['https://example.com/high-priority.js'] }];
const lowPriorityScripts = [{ name: 'low-priority-script', sources: ['https://example.com/low-priority.js'] }];

$ls(highPriorityScripts);
// Later in the process
$ls(lowPriorityScripts);

Scenario 9: CDN Fallback Loading

Implement fallback loading from a CDN to local if the CDN fails:

const script = {
  name: 'cdn-fallback-script',
  sources: [
    'https://cdn.example.com/script.js',
    '/local/path/script.js'
  ]
};

$ls(script);

Scenario 10: On-Demand Script Loading

Utilize your library to load scripts when a specific action occurs:

const loadAdditionalScript = () => {
  const scriptsToLoad = [
    { name: 'additional-script-1', sources: ['https://example.com/additional-script-1.js'] },
    { name: 'additional-script-2', sources: ['https://example.com/additional-script-2.js'], dependencies: ['additional-script-1'] }
  ];

  $ls(scriptsToLoad);
};

// Example: Load additional scripts when a button is clicked
document.getElementById('load-scripts-btn').addEventListener('click', loadAdditionalScript);

Explore more scenarios and use cases within our Wiki to harness the full potential of Scripts Loader!