HTML/JS Onload là gì và nó hoạt động như thế nào?
Khái niệm tải HTML/JS có thể giúp bạn kiểm soát hành vi của trang web sau khi tải xong.
Tải một trang web bao gồm việc đợi nội dung trang, hình ảnh và các tài nguyên khác được tải hoàn toàn.
Một số trang web đảm bảo rằng chức năng nhất định không xảy ra cho đến khi mọi thứ tải xong. Một ví dụ bao gồm chỉ truy xuất dữ liệu từ cơ sở dữ liệu sau khi trang đã được tải.
Có nhiều cách khác nhau để bạn có thể kiểm tra xem một trang web đã được tải đầy đủ hay chưa. Bạn có thể nghe các sự kiện bằng trình xử lý sự kiện JavaScript, sử dụng cửa sổ.onload sự kiện JavaScript hoặc sự kiện đang tải thuộc tính HTML.
Mục Lục
Cách sử dụng onLoad với phần tử HTML Body
Bạn có thể sử dụng các sự kiện JavaScript để kiểm tra xem nội dung của trang web đã được tải chưa. Bạn sẽ cần một tệp HTML chứa một số nội dung trang và một tệp JavaScript để thực thi mã.
Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và bạn được sử dụng miễn phí theo giấy phép MIT.
- Trong một tệp HTML mới có tên index.htmlthêm mã HTML cơ bản sau:
<!DOCTYPE html>
<html>
<head>
<title>Example using onload</title>
</head>
<body>
<h1>Example using onload()</h1>
<p>This example demonstrates how to use the onload() event in JavaScript.</p>
</body>
</html> - Tạo một tệp mới trong cùng thư mục có tên script.js. Liên kết tệp này với trang HTML của bạn bằng thẻ script. Bạn có thể thêm thẻ script ở cuối thẻ body:
<body>
<script src="script.js"></script>
</body> - Bên trong nội dung trong thẻ nội dung HTML của bạn, hãy thêm thẻ đoạn văn trống.
<p id="output"></p> - Bên trong tệp JavaScript, hãy thêm cửa sổ.onload chức năng sự kiện. Điều này sẽ thực thi khi trang đã được tải:
window.onload = function() {
}; - Bên trong hàm, điền nội dung của thẻ đoạn văn trống. Thao tác này sẽ thay đổi thẻ đoạn văn để chỉ hiển thị thông báo khi trang đã được tải:
document.getElementById("output").innerHTML = "Page loaded!"; - Ngoài ra, bạn cũng có thể sử dụng trình lắng nghe sự kiện để lắng nghe DOMNội dung được tải sự kiện. DOMNội dung được tải kích hoạt sớm hơn window.onload. Nó kích hoạt ngay khi tài liệu HTML đã sẵn sàng, thay vì chờ tải tất cả các tài nguyên bên ngoài.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("output").innerHTML = "Page loaded!";
}); - Mở tệp index.html trong trình duyệt web để xem thông báo khi trang tải xong:
- Thay vì sử dụng các sự kiện JavaScript để kiểm tra xem một trang đã được tải hay chưa, bạn cũng có thể sử dụng đang tải thuộc tính HTML cho cùng một kết quả. Thêm thuộc tính onload vào thẻ body trong tệp HTML của bạn:
<body onload="init()"> - tạo trong đó() chức năng bên trong tệp JavaScript. Bạn không nên sử dụng cả thuộc tính onload HTML và sự kiện JavaScript onload cùng một lúc. Làm như vậy có thể dẫn đến hành vi không mong muốn hoặc xung đột giữa hai chức năng.
function init() {
document.getElementById("output").innerHTML = "Page loaded!";
}
Chúng tôi khuyên bạn nên sử dụng trình xử lý sự kiện JavaScript và cửa sổ.onload phương pháp trên HTML đang tải thuộc tính vì việc tách biệt hành vi và nội dung của trang web là một phương pháp hay. Ngoài ra, trình xử lý sự kiện JavaScript cung cấp khả năng tương thích và linh hoạt hơn so với hai phương thức còn lại.
Cách sử dụng onLoad với phần tử HTML hình ảnh
Bạn cũng có thể sử dụng sự kiện onload để thực thi mã khi các phần tử khác tải trên trang. Một ví dụ về điều này là yếu tố hình ảnh.
- Trong cùng thư mục với tệp index.html của bạn, hãy thêm bất kỳ hình ảnh nào.
- Bên trong tệp HTML, thêm thẻ hình ảnh và liên kết thuộc tính src với tên của hình ảnh được lưu trong thư mục.
<img id="myImage" src="Pidgeymon.png" width="300"> - Thêm một thẻ đoạn trống khác để hiển thị thông báo khi tải hình ảnh:
<p id="imageLoadedMessage"></p> - Bên trong tệp JavaScript, hãy thêm sự kiện tải lên hình ảnh. Sử dụng id duy nhất hình ảnh của tôi để xác định phần tử hình ảnh nào sẽ thêm sự kiện tải vào:
var myImage = document.getElementById("myImage");
myImage.onload = function() {
}; - Bên trong sự kiện onload, thay đổi HTML bên trong để thêm Đã tải hình ảnh tin nhắn:
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!"; - Thay vì sử dụng myImage.onloadbạn cũng có thể sử dụng một trình lắng nghe sự kiện để lắng nghe trọng tải Sự kiện JavaScript:
myImage.addEventListener('load', function() {
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}); - Mở index.html trong trình duyệt web để xem hình ảnh và thông báo:
- Để có kết quả tương tự, bạn cũng có thể sử dụng thuộc tính HTML onload. Tương tự với thẻ body, thêm thuộc tính onload vào thẻ img:
<img id="myImage" src="Pidgeymon.png" width="300" onload="imageLoaded()"> - Thêm chức năng trong tệp JavaScript để thực thi mã khi hình ảnh được tải:
function imageLoaded() {
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}
Cách sử dụng onLoad khi tải JavaScript
Bạn có thể sử dụng thuộc tính HTML onload để kiểm tra xem trình duyệt đã tải xong tệp JavaScript chưa. Không có sự kiện tải JavaScript tương đương cho thẻ tập lệnh.
- Thêm thuộc tính onload vào thẻ script trong tệp HTML của bạn.
<script src="script.js" onload="LoadedJs()"></script> - Thêm chức năng vào tệp JavaScript của bạn. In một tin nhắn bằng cách đăng nhập vào bảng điều khiển trình duyệt:
function LoadedJs() {
console.log("JS Loaded by the browser!");
} - Mở tệp index.html trong trình duyệt. Bạn có thể sử dụng Chrome DevTools để xem bất kỳ thông báo nào xuất ra trong bảng điều khiển.
Đang tải trang web trong trình duyệt
Giờ đây, bạn có thể sử dụng các chức năng và sự kiện để thực thi mã nhất định khi trang web tải xong. Tải trang là một yếu tố quan trọng trong việc tạo trải nghiệm người dùng mượt mà và liền mạch.
Bạn có thể tìm hiểu thêm về cách bạn có thể tích hợp các thiết kế trang tải thú vị hơn vào trang web của mình.