Làm cách nào để sử dụng chức năng tải trong JavaScript?

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 để sử dụng chức năng tải trong JavaScript?
Công dụng của hàm load() là gì?
Làm cách nào để tải dữ liệu trong JavaScript?
Làm cách nào để sử dụng tải cửa sổ trong JavaScript?

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

Đối với đối tượng window, sự kiện load đượ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 load, bạn đăng ký một trình lắng nghe sự kiện bằng cách sử dụ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 load đã đượ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 load cũng kích hoạt hình ảnh. Để xử lý sự kiện load 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 phần tử ảnh

Ví dụ sau sử dụng trình xử lý sự kiện load để 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

<img id="logo" 
     src="logo.png" 
     onload="console.log('Logo loaded!')">
Code language: HTML, XML (xml)

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' () => {
    let logo = document.createElement('img');
    // assign and onload event handler
    logo.addEventListener('load', (event) => {
        console.log('The logo has been loaded');
    });
    // add logo to the document
    document.body.appendChild(logo);
    logo.src = 'logo.png';
});
Code language: JavaScript (javascript)

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, chỉ định 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 load hơi khác so với các cách tiêu chuẩn. Sự kiện load 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 xong. 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 để sử dụng chức năng tải trong JavaScript?

tải(). Phương thức load() gắn một trình xử lý sự kiện vào sự kiện tải . Sự kiện tải xảy ra khi một phần tử được chỉ định đã được tải. Sự kiện này hoạt động với các phần tử được liên kết với một URL (hình ảnh, tập lệnh, khung, iframe) và đối tượng cửa sổ.

Công dụng của hàm load() là gì?

Phương thức load() tải dữ liệu từ máy chủ và đặt dữ liệu trả về vào phần tử đã chọn .

Làm cách nào để tải dữ liệu trong JavaScript?

Để làm được điều đó, bạn cần phải. .

gửi yêu cầu AJAX trong mã javascript của bạn

phân tích yêu cầu và gửi lại tệp qua PHP

thực hiện logic của bạn trong Javascript khi yêu cầu được phản hồi

Làm cách nào để sử dụng tải cửa sổ trong JavaScript?

Sự kiện tải được kích hoạt khi toàn bộ trang đã được tải, bao gồm tất cả các tài nguyên phụ thuộc như biểu định kiểu, tập lệnh, iframe và hình ảnh . Điều này trái ngược với DOMContentLoaded , được kích hoạt ngay khi trang DOM được tải mà không cần đợi tài nguyên tải xong.

programming javascript

Làm cách nào để sử dụng chức năng tải trong JavaScript?

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 để sử dụng chức năng tải trong JavaScript?

Công dụng của hàm load() là gì?

Làm cách nào để tải dữ liệu trong JavaScript?

Làm cách nào để sử dụng tải cửa sổ trong JavaScript?

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