Load event là một sự kiện quan trọng trong JavaScript, cho phép bạn thực hiện các hành động khi tài liệu hoặc một phần tử trên trang đã hoàn tất tải. Sự kiện này được sử dụng rộng rãi trong phát triển web để đảm bảo rằng tất cả các tài nguyên, bao gồm hình ảnh, file CSS, JavaScript, và các thành phần khác, đã được tải hoàn toàn trước khi bạn tương tác với chúng hoặc thực hiện các chức năng khác.
window.loadSự kiện load trên đối tượng window xảy ra khi toàn bộ tài liệu và tất cả các tài nguyên liên quan đã được tải xong. Điều này bao gồm các file hình ảnh, stylesheet, và script.
Sử dụng sự kiện này rất hữu ích khi bạn cần đảm bảo rằng mọi thứ đã sẵn sàng trước khi chạy mã JavaScript. Ví dụ, nếu bạn muốn khởi động một ứng dụng hoặc hiển thị thông tin sau khi tất cả các thành phần đã được tải, bạn có thể sử dụng sự kiện này.
window.addEventListener('load', function() {
console.log('Tất cả tài nguyên đã được tải xong.');
// Khởi động một ứng dụng hoặc thực hiện các thao tác với DOM
});window.addEventListener('load', function() {
const mainContent = document.getElementById('main-content');
mainContent.style.display = 'block'; // Hiện nội dung chính sau khi tải xong
});load trên các phần tửNgoài window, sự kiện load cũng có thể được sử dụng trên các phần tử cụ thể như <img>, <iframe>, và <script>. Khi sự kiện này xảy ra trên các phần tử này, nó cho biết rằng tài nguyên tương ứng đã được tải xong.
Điều này đặc biệt hữu ích khi bạn cần thực hiện các thao tác như chỉnh sửa hoặc hiển thị hình ảnh sau khi chúng đã được tải.
const img = document.createElement('img');
img.src = 'https://example.com/image.jpg';
// Thêm sự kiện load để xử lý khi hình ảnh đã tải xong
img.addEventListener('load', function() {
console.log('Hình ảnh đã được tải.');
document.body.appendChild(img); // Thêm hình ảnh vào DOM
});
// Thêm hình ảnh vào DOM
document.body.appendChild(img);Load event là một công cụ mạnh mẽ trong JavaScript, giúp đảm bảo rằng mọi thứ trên trang web đã được tải hoàn toàn trước khi thực hiện các hành động. Bằng cách sử dụng sự kiện này một cách thông minh, bạn có thể cải thiện hiệu suất và trải nghiệm người dùng trên trang web của mình.
