Tải nội dung HTML

Question

Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu cách xử lý sự kiện tải kích hoạt trên các thành phần tài liệu, hình ảnh và tập lệnh trong JavaScript

Nội dung chính Show

Sự kiện tải của cửa sổ
Sự kiện tải hình ảnh
Sự kiện tải của tập lệnh
Làm cách nào để áp dụng onload trong HTML?
Làm cách nào để thêm body onload trong JavaScript?
Làm cách nào để gọi hàm JavaScript khi tải HTML?
Onload có hoạt động trên div không?

Sự kiện tải của cửa sổ

Đối với đối tượng

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

6, sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 được kích hoạt khi toàn bộ trang web (HTML) đã được tải đầy đủ, bao gồm tất cả các tài nguyên phụ thuộc, bao gồm tệp JavaScript, tệp CSS và hình ảnh

Để xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7, bạn đăng ký một trình lắng nghe sự kiện bằng phương thức

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

0

window.addEventListener('load', (event) => {
    console.log('The page has fully loaded');
});
Code language: JavaScript (javascript)

Hoặc sử dụng thuộc tính

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 của đối tượng

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

2

window.onload = (event) => {
    console.log('The page has fully loaded');
};



Code language: JavaScript (javascript)

Nếu bạn duy trì một hệ thống kế thừa, bạn có thể thấy rằng trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 đã được đăng ký trong phần tử nội dung của tài liệu HTML, như thế này

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

Đó là một cách thực hành tốt để sử dụng phương pháp

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

0 để chỉ định trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 bất cứ khi nào có thể

Sự kiện tải hình ảnh

Sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 cũng kích hoạt hình ảnh. Để xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 trên ảnh, bạn sử dụng phương thức

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

0 của các thành phần ảnh

Ví dụ sau sử dụng trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 để xác định xem một hình ảnh tồn tại trong cây DOM đã được tải hoàn toàn hay chưa

html>
<html>
<head>
    <title>Image load Event Demotitle>
head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    script>
body>
html>
Code language: HTML, XML (xml)

Bạn có thể chỉ định trực tiếp một trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 bằng cách sử dụng thuộc tính

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 của phần tử

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

2, như thế này

window.addEventListener('load', (event) => {
    console.log('The page has fully loaded');
});
Code language: JavaScript (javascript)

3

Nếu bạn tạo phần tử hình ảnh động, bạn có thể chỉ định trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 trước khi đặt thuộc tính

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

4 như sau

window.addEventListener('load', (event) => {
    console.log('The page has fully loaded');
});
Code language: JavaScript (javascript)

6

Làm thế nào nó hoạt động

Đầu tiên, tạo một thành phần hình ảnh sau khi tài liệu đã được tải đầy đủ bằng cách đặt mã bên trong trình xử lý sự kiện của sự kiện tải cửa sổ

Thứ hai, gán trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};



Code language: JavaScript (javascript)

1 cho hình ảnh

Thứ ba, thêm hình ảnh vào tài liệu

Cuối cùng, gán URL hình ảnh cho thuộc tính

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

4. Hình ảnh sẽ được tải xuống phần tử ngay khi thuộc tính

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

4 được đặt

Sự kiện tải của tập lệnh

Phần tử

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

8 cũng hỗ trợ sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 hơi khác so với các cách tiêu chuẩn. Sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

7 của tập lệnh cho phép bạn kiểm tra xem tệp JavaScript đã được tải hoàn toàn chưa

Không giống như hình ảnh, trình duyệt web chỉ bắt đầu tải xuống các tệp JavaScript sau khi thuộc tính

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

4 đã được chỉ định và phần tử

html>
<html>
<head>
    <title>JS load Event Demotitle>
head>
<body onload="console.log('Loaded!')">
body>
html>
Code language: HTML, XML (xml)

8 đã được thêm vào tài liệu

Đoạn mã sau tải tệp

html>
<html>
<head>
    <title>Image load Event Demotitle>
head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    script>
body>
html>
Code language: HTML, XML (xml)

3 sau khi trang đã được tải hoàn toàn. Nó chỉ định một trình xử lý sự kiện

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 để kiểm tra xem

html>
<html>
<head>
    <title>Image load Event Demotitle>
head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    script>
body>
html>
Code language: HTML, XML (xml)

3 đã được tải đầy đủ chưa

Làm cách nào để áp dụng onload trong HTML?

Thuộc tính onload kích hoạt khi một đối tượng đã được tải. onload được thường được sử dụng nhất trong phần tử (bao gồm hình ảnh, tệp tập lệnh, CSS . ). Tuy nhiên, nó cũng có thể được sử dụng trên các thành phần khác (xem "Thẻ HTML được hỗ trợ" bên dưới).

Làm cách nào để thêm body onload trong JavaScript?

Cách hoạt động. .

Đầu tiên, tạo một thành phần hình ảnh sau khi tài liệu đã được tải đầy đủ bằng cách đặt mã bên trong trình xử lý sự kiện của sự kiện tải của cửa sổ

Thứ hai, gán trình xử lý sự kiện onload cho hình ảnh

Thứ ba, thêm hình ảnh vào tài liệu

Cuối cùng, gán URL hình ảnh cho thuộc tính src

Làm cách nào để gọi hàm JavaScript khi tải HTML?

Nếu bạn muốn phương thức onload nhận tham số, bạn có thể làm tương tự như sau. cửa sổ. onload = function() { yourFunction(param1, param2); . This binds onload to an anonymous function, that when invoked, will run your desired function, with whatever parameters you give it.

Onload có hoạt động trên div không?

Sự kiện onload chỉ có thể được sử dụng trên chính tài liệu (nội dung), khung, hình ảnh và tập lệnh . Nói cách khác, nó chỉ có thể được gắn vào phần thân và/hoặc từng tài nguyên bên ngoài. Div không phải là tài nguyên bên ngoài và nó được tải như một phần của nội dung, vì vậy sự kiện onload không áp dụng ở đó.

programming html

Tải nội dung HTML

Sự kiện tải của cửa sổ

Sự kiện tải hình ảnh

Sự kiện tải của tập lệnh

Làm cách nào để áp dụng onload trong HTML?

Làm cách nào để thêm body onload trong JavaScript?

Làm cách nào để gọi hàm JavaScript khi tải HTML?

Onload có hoạt động trên div không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội