Checking for lazy loaded script promise

Active3 hr before
Viewed126 times

9 Answers


The easiest way to use LazyLoad is to include the script from a CDN:, LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport, Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading

Example_snippet/controller/utility/_loaded.js/ - Fix typo. . .
-Fix typo
load more v

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value,,Wait until all promises have settled (each may resolve or reject)

Example_snippet/controller/utility/_loaded.js/ const myPromise = new Promise(. . .
const myPromise = new Promise((resolve, reject) => {
   setTimeout(() => {
   }, 300);

   .then(handleResolvedA, handleRejectedA)
   .then(handleResolvedB, handleRejectedB)
   .then(handleResolvedC, handleRejectedC);
load more v

You can also reference the script from the release of your choice (from version 2,2900 on) through the Coveo CDN (see JavaScript Search Framework CDN Links):,You can also reference the script from the release of your choice (from version 1

Example_snippet/controller/utility/_loaded.js/ <head> [ ... ] <script src. . .
   [ ... ]
   <script src="js/CoveoJsSearch.js"></script>
   [ ... ]
load more v

To load our script, we begin by creating a new method loadExternalScript(scriptURL),  which will return a promise, A promise will make it easier to ensure that we will use our script after it has been loaded successfully and not before

Example_snippet/controller/utility/_loaded.js/ return new Promise(resolve => . . .
return new Promise(resolve => {
   const scriptElement = document.createElement('script');
   scriptElement.src = scriptUrl;
   scriptElement.onload = resolve;
load more v

With the addition of async await in TypeScript, we can use the syntactic sugar to clean things up a little!,Changing over our Promise-based routing implementation to using the newer async await syntax looks far nicer,,Currently, the Angular documentation suggests a Promise-based syntax for declaring which routes to lazy load, which we add to a loadChildren property on the routes:,Back in TypeScript 2

Example_snippet/controller/utility/_loaded.js/ main.chunk.js // loaded everyw. . .
main.chunk.js // loaded everywhere
shop.chunk.js // lazy module
admin.chunk.js // lazy module
load more v

Example_snippet/controller/utility/_promise.js/ <html xmlns=" . .
<html xmlns="">


   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="">
   <script src=""></script>
   <script src=""></script>
   <script src=""></script>
   <script src="ocLazyLoadRequire.js"></script>
   <script src="ocLazyLoad.js"></script>

   <script src=""></script>

   <script src="script.js"></script>


<body ng-app="myApp">
   <!-- Navigation -->
   <nav class="navbar navbar-default">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         <a class="navbar-brand" href="#">Lazy Load in angular</a>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav navbar-right">
            <li><a href="#/home">Home</a></li>
            <li><a href="#/profile">profile</a></li>
      </div><!-- /.navbar-collapse -->
   <h5>Click one menu from the menu bar</h5>

load more v

In this snippet, you are hard-coding the river information, but this function will be similar to any asynchronous functions you may use, such as an API call, The important part is that the code returns a promise

Example_snippet/controller/utility/_promise.js/ mkdir src/components/RiverInfo. . .
mkdir src / components / RiverInformation
load more v

Now let's run webpack and check out our new lazy-loading functionality:,Note that when using import() on ES6 modules you must reference the ,default property as it's the actual module object that will be returned when the promise is resolved

Example_snippet/controller/utility/_promise.js/ webpack-demo |- package.json |. . .
webpack - demo |
   -package.json |
   -webpack.config.js |
   -/dist |
   -/src |
   -index.js +
   | -print.js |
load more v

So let's say I'm async loading some script (google maps in my case) with a service, which will return a promise and resolve it on load finish,,How would I go about implementing some method which will work only if the script has finished loading?,I do this because I don't want to add the script to index

Example_snippet/controller/utility/_promise.js/ ngOnInig() { this.promiseR. . .
ngOnInig() {
load more v