加载js怎么显示内容

加载JS显示内容的方法有很多种，其中常见的包括：使用DOMContentLoaded事件、使用window.onload事件、使用异步和延迟脚本加载。这些方法各有优缺点，适用于不同的场景。例如，使用DOMContentLoaded事件可以在HTML文档完全加载和解析后立即执行JavaScript代码，确保页面内容已经可用，从而避免由于脚本执行过早而产生的错误。下面详细介绍这些方法及其应用。

一、DOMContentLoaded事件

1、什么是DOMContentLoaded事件

DOMContentLoaded事件 是一种浏览器事件，它会在HTML文档完全加载和解析完毕后触发，但不必等待样式表、图像和子框架的完全加载。这个事件非常适合用于需要在页面内容加载完毕后立即执行的JavaScript代码。

document.addEventListener('DOMContentLoaded', function() {
    // 你的代码
    console.log('DOM 完全加载和解析完毕');
});

2、使用DOMContentLoaded事件的优点

更快的响应时间：由于不需要等待所有资源加载完毕，脚本可以更快执行，提高页面响应速度。
避免脚本执行过早：确保在DOM内容完全解析后再执行脚本，避免因元素未加载而导致的错误。

3、实际应用案例

在实际开发中，通常会在DOMContentLoaded事件中进行DOM操作，如设置事件监听器、修改DOM元素内容等。例如，以下代码展示了如何在页面加载完毕后显示一个隐藏的div元素：

document.addEventListener('DOMContentLoaded', function() {
    var content = document.getElementById('content');
    content.style.display = 'block';
});

二、window.onload事件

1、什么是window.onload事件

window.onload事件 是在整个页面（包括所有相关资源，如样式表、图像）完全加载完毕后才会触发。因此，它比DOMContentLoaded事件触发得更晚。

window.onload = function() {
    // 你的代码
    console.log('页面完全加载');
};

2、使用window.onload事件的优点

确保所有资源加载完毕：适用于需要在所有资源（如图像、样式表）加载完毕后再执行的脚本。
更全面的加载状态：适用于需要访问页面上所有资源的脚本。

3、实际应用案例

例如，以下代码展示了如何在页面完全加载后显示一个包含图像的div元素：

window.onload = function() {
    var content = document.getElementById('content');
    content.style.display = 'block';
};

三、异步和延迟脚本加载

1、使用async属性

async属性 允许脚本在后台异步加载，而不会阻塞页面的解析。当脚本加载完毕后，会立即执行。

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

2、使用defer属性

defer属性 也是用于异步加载脚本，但它会在HTML文档完全解析后才执行脚本。与async不同的是，defer脚本的执行顺序会按照它们在页面中的出现顺序执行。

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

3、实际应用案例

例如，以下代码展示了如何使用defer属性在页面解析完毕后显示一个隐藏的div元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Deferred Script Example</title>
</head>
<body>
    <div id="content" style="display:none;">Hello, World!</div>
    <script defer>
        document.addEventListener('DOMContentLoaded', function() {
            var content = document.getElementById('content');
            content.style.display = 'block';
        });
    </script>
</body>
</html>

四、结合使用多种方法

在实际开发中，可能需要结合使用多种方法来满足不同需求。例如，可以在使用defer属性的同时，结合DOMContentLoaded事件来确保脚本在最合适的时间执行。

1、结合使用DOMContentLoaded和defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Combined Example</title>
</head>
<body>
    <div id="content" style="display:none;">Hello, World!</div>
    <script defer>
        document.addEventListener('DOMContentLoaded', function() {
            var content = document.getElementById('content');
            content.style.display = 'block';
        });
    </script>
</body>
</html>

2、结合使用window.onload和defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Combined Example</title>
</head>
<body>
    <div id="content" style="display:none;">Hello, World!</div>
    <script defer>
        window.onload = function() {
            var content = document.getElementById('content');
            content.style.display = 'block';
        };
    </script>
</body>
</html>

五、动态加载脚本

1、使用JavaScript动态加载

在某些情况下，可能需要在特定事件发生时动态加载脚本。例如，可以在用户点击按钮时动态加载并执行脚本。

document.getElementById('loadScriptButton').addEventListener('click', function() {
    var script = document.createElement('script');
    script.src = 'script.js';
    document.body.appendChild(script);
});

2、实际应用案例

以下代码展示了如何在用户点击按钮后动态加载并显示内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Script Loading Example</title>
</head>
<body>
    <div id="content" style="display:none;">Hello, World!</div>
    <button id="loadScriptButton">Load Script</button>
    <script>
        document.getElementById('loadScriptButton').addEventListener('click', function() {
            var script = document.createElement('script');
            script.src = 'script.js';
            document.body.appendChild(script);
            script.onload = function() {
                var content = document.getElementById('content');
                content.style.display = 'block';
            };
        });
    </script>
</body>
</html>

六、使用JavaScript库

1、jQuery

jQuery 是一个广泛使用的JavaScript库，提供了简化的DOM操作和事件处理方法。使用jQuery，可以更方便地实现页面加载后显示内容的功能。

$(document).ready(function() {
    $('#content').show();
});

2、实际应用案例

以下代码展示了如何使用jQuery在页面加载后显示一个隐藏的div元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content" style="display:none;">Hello, World!</div>
    <script>
        $(document).ready(function() {
            $('#content').show();
        });
    </script>
</body>
</html>

3、使用其他JavaScript库

除了jQuery之外，还有许多其他JavaScript库和框架（如React、Vue.js）可以简化页面内容显示的实现。以下是使用Vue.js的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app" style="display:none;">Hello, World!</div>
    <script>
        new Vue({
            el: '#app',
            mounted: function() {
                this.$el.style.display = 'block';
            }
        });
    </script>
</body>
</html>

七、延迟加载和懒加载

1、什么是延迟加载和懒加载

延迟加载（Lazy Loading）是一种优化技术，允许在需要时才加载资源，以减少初始加载时间。这在加载大量图像或内容较多的页面时尤为有用。

2、使用IntersectionObserver实现懒加载

IntersectionObserver API可以用于检测元素是否进入视口，从而实现懒加载。

document.addEventListener('DOMContentLoaded', function() {
    var lazyloadImages = document.querySelectorAll('img.lazy');
    var imageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var image = entry.target;
                image.src = image.dataset.src;
                image.classList.remove('lazy');
                imageObserver.unobserve(image);
            }
        });
    });
    lazyloadImages.forEach(function(image) {
        imageObserver.observe(image);
    });
});

3、实际应用案例

以下代码展示了如何使用IntersectionObserver实现图像的懒加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Loading Example</title>
    <style>
        img {
            width: 100%;
            height: auto;
        }
        .lazy {
            opacity: 0;
            transition: opacity 0.5s;
        }
        .lazy-loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img class="lazy" data-src="large-image.jpg" alt="Lazy Load Image">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var lazyloadImages = document.querySelectorAll('img.lazy');
            var imageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        var image = entry.target;
                        image.src = image.dataset.src;
                        image.classList.add('lazy-loaded');
                        imageObserver.unobserve(image);
                    }
                });
            });
            lazyloadImages.forEach(function(image) {
                imageObserver.observe(image);
            });
        });
    </script>
</body>
</html>

八、总结

通过本文的讲解，我们了解了多种加载JavaScript显示内容的方法，包括DOMContentLoaded事件、window.onload事件、异步和延迟脚本加载、动态加载脚本、使用JavaScript库以及延迟加载和懒加载技术。每种方法都有其适用的场景和优缺点，开发者可以根据具体需求选择合适的方法来实现最佳的页面加载效果。

加载js怎么显示内容

一、DOMContentLoaded事件

1、什么是DOMContentLoaded事件

2、使用DOMContentLoaded事件的优点

3、实际应用案例

二、window.onload事件

1、什么是window.onload事件

2、使用window.onload事件的优点

3、实际应用案例

三、异步和延迟脚本加载

1、使用async属性

2、使用defer属性

3、实际应用案例

四、结合使用多种方法

1、结合使用DOMContentLoaded和defer

2、结合使用window.onload和defer

五、动态加载脚本

1、使用JavaScript动态加载

2、实际应用案例

六、使用JavaScript库

1、jQuery

2、实际应用案例

3、使用其他JavaScript库

七、延迟加载和懒加载

1、什么是延迟加载和懒加载

2、使用IntersectionObserver实现懒加载

3、实际应用案例

八、总结

相关问答FAQs：