How to add a lazy load to the script?

Question

There is a script:

<script>
    $(function (){
        $('#jstree')
            .jstree({
                "plugins": [ "dnd", "sort", "json_data" ],
                'core':{
                    "check_callback" : true,
                    "plugins" : ["contextmenu", "dnd"],
                    'data': {
                        'url': function  (node) {
                            return node.id === '#' ? 'ajax?id=root' : 'ajax?id=' + node.id;
                        },
                        'data':  function (node) {
                            return { 'id': node.id };
                        }
                    }
                }
            });
    });

</script>

I need to add a delay (2 sec) on opening nodes. I readed jQuery documentation but i didn't find an answer there. Please help me how add a delay?

Jimenemex · Answer 1 · 2017-10-25T14:41:37.087

Answer referenced from combined two other SO answers.

Essentially, set a timeout function when the DOM loads and create a <script> tag at run time. Then just append it to the <body> and it will load.

console.log("Seconds: " + new Date().getSeconds());
setTimeout(function() {

  var blob = new Blob(["console.log('Loaded after')"]); // Insert JS code into []
  var script = document.createElement('script');
  var url = URL.createObjectURL(blob);
  script.onload = script.onerror = function() {
    URL.revokeObjectURL(url);
  };
  script.src = url;
  document.body.appendChild(script);
  console.log("Seconds: " + new Date().getSeconds());
}, 2000);

<html>

<head>
</head>

<body>
  <p>foo</p>
</body>

</html>

How to add a lazy load to the script?

1 Answers1