Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Enable using this library to pre-load the JSAPI

See original GitHub issue


  1. user visits index route (no map, no JSAPI yet)
  2. app renders index page, then starts loading JSAPI (bootstrap()) so that map route loads faster once people go there
  3. user clicks link to map route
  4. map route checks if already loaded (isLoaded()) or loading, if not, load JSAPI. Once JSAPI is loaded, create the map

The only thing new here (when compared to the lazy loading example) is keeping track of the notion that the JSAPI is already in the process of being loaded and providing a hook to do something once it’s done. Currently users can pass a callback, but in a preloading scenario, the context is likely to change between when a user calls bootstrap()and when they want to actually create a map.

One idea is to expose an isLoading property and .onLoad(fn) (or .on('load', fn)) event. I’m not a real big fan of having both a callback and an event, so if we go this route, may want to deprecate the callback? Not sure.

Thoughts welcome.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

tomwaysoncommented, Feb 13, 2017

Interesting. Still would like to figure out how to do #8 w/o adding yet another promise implementation to someone’s app.

alexurquhartcommented, Mar 13, 2017

First off thanks for putting these libraries up, I’ve just started playing with angular 2 and have been working off this to create a similar implementation bundled in with an angular service.

One possible solution is to check for the existence of the API script tag in dojoRequire(), and if window['require'] is undefined, then add an event listener to the script that will execute the callback, like so:

In bootstrap():

  // create a script object whose source points to the API
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = options.url;

  // Add data-attribute so we can find the script in dojoRequire()
  script.dataset.esriLoader = '';


export function dojoRequire(modules: string[], callback: Function) {
  if (isLoaded()) { 
    window['require'](modules, callback);
  const script = document.querySelector('script[data-esri-loader=""]');
  if (script) {
    // Not yet loaded but script is in the body - use callback after onLoad event
    script.addEventListener('load', () => {
      window['require'](modules, callback);
  } else {
    // Not bootstrapped
    throw new Error('The ArcGIS API for JavaScript has not been loaded. You must first call esriLoader.bootstrap()');

Here’s a sample with some console.logs to demonstrate the order of operations:

Read more comments on GitHub >

github_iconTop Results From Across the Web

PreloadJS | A JavaScript library that lets you manage and co ...
PreloadJS makes it easy to preload your assets: images, sounds, JS, fonts, text, and more. It uses XHR2 to provide real progress information...
Read more >
Preloaded JavaScript and Libraries - Retool Docs
To add preloaded JavaScript at the application level, click on the More Settings menu (three dots) next to the Share button in the...
Read more >
Load the Libraries | Charts - Google Developers
This page shows how to load the Google Chart libraries. Basic Library Loading. With few exceptions, all web pages with Google Charts should...
Read more >
ember-esri-loader - npm
An Ember addon that wraps the esri-loader library to allow lazy ... Preload the JS & CSS for the latest (4.x) version of...
Read more >
SmartCropVideoViewer | Adobe Experience Manager
Dynamic Media Viewers Reference Guide · Viewer library examples ... localizedTexts - { Object } JSON object with localization data.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found