How to implement javascript delayed loading

Implementation method: 1. Use the setTimeout method, the syntax is "setTimeout('js method', delay time);"; 2. When introducing an external js script file, put it in the body, and it will follow the page from above Fall down the load order to run JavaScript code.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Lazy loading of js helps to improve the loading speed of the page. The following are several methods of lazy loading:

1. Use setTimeout to delay the loading time of the method

Delay loading of js code to allow more time for web page loading

<script type="text/javascript" >
  function A(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("Hello");
    });
  }
  $(function (){
    setTimeout(&#39;A()&#39;, 1000); //延迟1秒
  })
</script>

2. Let js be loaded last

For example, when introducing external js script files , if placed in the head of the html, the js script will be loaded into the page before the page is loaded, and if placed in the body, the JavaScript code will be run in the order in which the page is loaded from top to bottom~~~ So we You can put the files imported from outside the js to the bottom of the page, so that the js can be introduced last, thereby speeding up the page loading.

The above method 2 will also occasionally cause you to receive "delayed loading javascript" from the Google page speed test tool. warn. So the solution here will be the recommended solution from the Google help page.

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
  function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

This code means to wait until the entire document is loaded before loading the external file "defer.js".

Steps to use this code:

1). Copy the above code

2). Paste the code before the HTML tag (near the bottom of the HTML file)

3). Modify "defer.js" to the name of your external JS file

4). Make sure your file path is correct. For example: If you only enter "defer.js", then the "defer.js" file must be in the same folder as the HTML file.

Note: This code will not load the specified external js file until the document is loaded. Therefore, JavaScript code that depends on normal page loading should not be placed here. Instead, JavaScript code should be separated into two groups. One group is the javascript code that is loaded immediately because the page needs it, and the other group is the javascript code that operates after the page is loaded (such as adding a click event or other things). The JavaScript code that needs to wait until the page is loaded before executing should be placed in an external file and then imported.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to implement javascript delayed loading. For more information, please follow other related articles on the PHP Chinese website!