Home >Web Front-end >JS Tutorial >How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js

How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js

不言Original: 2018-08-22 11:37:012588browse

The content of this article is about how many ways to implement lazy loading in js? The introduction to the six methods of js delayed loading has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

JS lazy loading means waiting for the page to load before loading the JavaScript file.
JS lazy loading helps improve page loading speed.
General methods are as follows:

defer attribute
async attribute
Dynamic creation of DOM method
Use jQuery’s getScript method
Use setTimeout delay method
Let JS Finally load

1, defer attribute
HTML 4.01 defines the defer attribute for the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.
Purpose: Indicates that the script will not affect the structure of the page when executed. In other words, the script will be delayed until the entire page has been parsed before execution.

Setting the defer attribute in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element is equivalent to telling the browser to download immediately but delay execution.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Note: Although the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element is placed within the 93f0f5c25f18dab9d176bd4f6de5d30e element, the included script will delay the browser from encountering 73a6ac4ed44ffec12cee46588e518a5e tag before executing.

The HTML5 specification requires that scripts be executed in the order in which they appear. In reality, deferred scripts do not necessarily execute in order.

The defer attribute only applies to external script files. Implementations that support HTML5 ignore the defer attribute set by embedded scripts.

2. async attribute

HTML5 defines # for the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag ##asyncProperties. Similar to the defer attribute, they are used to change the behavior of processing scripts. Likewise, only applies to external script files. Purpose: Do not let the page wait for the script to be downloaded and executed, thereby
loading other content of the page asynchronously.

Asynchronous scripts must be executed before the page load event.

There is no guarantee that the script will be executed in order.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Async, like defer, will not block the downloading of other resources, so it will not affect the loading of the page.

Disadvantages: Cannot control the order of loading

3. Dynamically create DOM method

//这些代码应被放置在</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",downloadJAAtOnload);    
        else
        window.onload = downloadJSAtload;</script>

4. Use jQuery’s getScript () method

$.getScript("outer.js",function(){  
//回调函数，成功获取文件后执行的函数
    console.log("脚本加载完成")
});

5. Use setTimeout delay method

6. Let JS load finally

Related Recommended:

Delayed loading of JavaScript

Detailed explanation of delayed loading of images in Javascript

JavaScript image lazy loading library Echo.js_javascript tips

The above is the detailed content of How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 jquery html echo JS 事件 dom 异步

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript code to implement image compressionNext article：JavaScript code to implement image compression

See more

How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js

Related articles