Tải bằng JavaScript

Question

Trong ví dụ, trình xử lý

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 chạy khi tài liệu được tải, vì vậy nó có thể xem tất cả các phần tử, bao gồm cả

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

4 bên dưới

Nội dung chính Show

Làm cách nào để sử dụng chức năng tải trong JavaScript?
Làm cách nào để tải một trang bằng JavaScript?
Điều gì có thể được sử dụng thay cho tải trong JavaScript?
Làm cách nào để đặt thời gian tải trong JavaScript?

Nhưng nó không đợi hình ảnh tải. Vì vậy,

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

6 hiển thị kích thước bằng không

Thoạt nhìn, sự kiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 rất đơn giản. Cây DOM đã sẵn sàng – đây là sự kiện. Có một vài đặc thù mặc dù

Khi trình duyệt xử lý tài liệu HTML và gặp thẻ

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

8, trình duyệt cần thực thi trước khi tiếp tục xây dựng DOM. Đó là một biện pháp phòng ngừa, vì các tập lệnh có thể muốn sửa đổi DOM và thậm chí

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

9 vào đó, vì vậy

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 phải đợi

Vì vậy, DOMContentLoaded chắc chắn xảy ra sau các tập lệnh như vậy

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

Trong ví dụ trên, đầu tiên chúng ta thấy “Library loading…”, và sau đó là “DOM sẵn sàng. ” (tất cả các tập lệnh được thực thi)

Các tập lệnh không chặn DOMContentLoaded

Có hai trường hợp ngoại lệ từ quy tắc này

Các tập lệnh có thuộc tính

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't execute until the stylesheet is loaded
  alert(getComputedStyle(document.body).marginTop);
</script>

1, chúng tôi sẽ trình bày sau một chút, không chặn

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3

Các tập lệnh được tạo động bằng

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't execute until the stylesheet is loaded
  alert(getComputedStyle(document.body).marginTop);
</script>

3 và sau đó được thêm vào trang web cũng không chặn sự kiện này

Các biểu định kiểu bên ngoài không ảnh hưởng đến DOM, vì vậy

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 không đợi chúng

Nhưng có một cạm bẫy. Nếu chúng ta có một tập lệnh sau kiểu, thì tập lệnh đó phải đợi cho đến khi biểu định kiểu tải

________số 8

Lý do cho điều này là tập lệnh có thể muốn lấy tọa độ và các thuộc tính phụ thuộc vào kiểu dáng khác của các phần tử, như trong ví dụ trên. Đương nhiên, nó phải đợi các kiểu tải

Khi

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 chờ các tập lệnh, giờ đây nó cũng chờ các kiểu trước chúng

Biểu mẫu tự động điền của Firefox, Chrome và Opera trên

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3

Ví dụ: nếu trang có biểu mẫu có thông tin đăng nhập và mật khẩu và trình duyệt ghi nhớ các giá trị, thì trên

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3, trình duyệt có thể cố gắng tự động điền chúng (nếu được người dùng chấp thuận)

Vì vậy, nếu

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 bị hoãn bởi các tập lệnh tải lâu, thì tính năng tự động điền cũng sẽ chờ. Bạn có thể đã thấy điều đó trên một số trang web (nếu bạn sử dụng tính năng tự động điền của trình duyệt) – các trường đăng nhập/mật khẩu không được tự động điền ngay lập tức mà sẽ có độ trễ cho đến khi trang tải đầy đủ. Đó thực sự là sự chậm trễ cho đến sự kiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3

Sự kiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

5 trên đối tượng

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

91 kích hoạt khi toàn bộ trang được tải bao gồm các kiểu, hình ảnh và các tài nguyên khác. Sự kiện này có sẵn thông qua tài sản

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

92

Ví dụ bên dưới hiển thị chính xác kích thước hình ảnh, vì

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

93 chờ tất cả hình ảnh

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

9

Khi khách truy cập rời khỏi trang, sự kiện

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

0 sẽ kích hoạt trên

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

91. Chúng tôi có thể làm điều gì đó ở đó mà không gây ra sự chậm trễ, chẳng hạn như đóng các cửa sổ bật lên có liên quan

Ngoại lệ đáng chú ý là gửi phân tích

Giả sử chúng tôi thu thập dữ liệu về cách sử dụng trang. nhấp chuột, cuộn, khu vực trang đã xem, v.v.

Đương nhiên, sự kiện

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

0 là khi người dùng rời khỏi chúng tôi và chúng tôi muốn lưu dữ liệu trên máy chủ của mình

Tồn tại một phương pháp

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

97 đặc biệt cho những nhu cầu như vậy, được mô tả trong thông số kỹ thuật https. //w3c. github. io/đèn hiệu/

Nó gửi dữ liệu trong nền. Quá trình chuyển đổi sang trang khác không bị trì hoãn. trình duyệt rời khỏi trang, nhưng vẫn thực hiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

98

Đây là cách sử dụng nó

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

8

Yêu cầu được gửi dưới dạng POST
Chúng tôi không chỉ có thể gửi một chuỗi mà còn cả các biểu mẫu và các định dạng khác, như được mô tả trong chương Tìm nạp, nhưng thông thường đó là một đối tượng được xâu chuỗi hóa
Dữ liệu bị giới hạn bởi 64kb

Khi yêu cầu

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

98 kết thúc, trình duyệt có thể đã rời khỏi tài liệu, vì vậy không có cách nào để nhận phản hồi của máy chủ (thường trống để phân tích)

Ngoài ra còn có một cờ

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

80 để thực hiện các yêu cầu "sau trang bên trái" như vậy trong phương thức tìm nạp cho các yêu cầu mạng chung. Bạn có thể tìm thêm thông tin trong chương Tìm nạp API

Nếu muốn hủy chuyển đổi sang trang khác, chúng tôi không thể thực hiện tại đây. Nhưng chúng ta có thể sử dụng một sự kiện khác –

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

81

Nếu khách truy cập bắt đầu điều hướng khỏi trang hoặc cố gắng đóng cửa sổ, trình xử lý

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

9 sẽ yêu cầu xác nhận bổ sung

Nếu chúng tôi hủy sự kiện, trình duyệt có thể hỏi khách truy cập xem họ có chắc chắn không

Bạn có thể thử bằng cách chạy mã này và sau đó tải lại trang

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3

Vì lý do lịch sử, việc trả lại chuỗi không trống cũng được tính là hủy sự kiện. Cách đây một thời gian, các trình duyệt thường hiển thị nó dưới dạng tin nhắn, nhưng như đã nói, chúng không nên

Đây là một ví dụ

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

4

Hành vi đã được thay đổi vì một số quản trị viên web đã lạm dụng trình xử lý sự kiện này bằng cách hiển thị các thông báo gây hiểu lầm và gây phiền nhiễu. Vì vậy, hiện tại, các trình duyệt cũ vẫn có thể hiển thị dưới dạng thông báo, nhưng ngoài điều đó ra - không có cách nào để tùy chỉnh thông báo hiển thị cho người dùng

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

83 không hoạt động từ trình xử lý

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

9

Điều đó nghe có vẻ lạ, nhưng hầu hết các trình duyệt đều bỏ qua

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

83

Có nghĩa là, đoạn mã sau có thể không hoạt động

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

8

Thay vào đó, trong các trình xử lý như vậy, người ta nên đặt

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

86 thành một chuỗi để nhận được kết quả tương tự như mã ở trên

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

0

Điều gì xảy ra nếu chúng tôi đặt trình xử lý

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

3 sau khi tài liệu được tải?

Đương nhiên, nó không bao giờ chạy

Có những trường hợp chúng tôi không chắc tài liệu đã sẵn sàng hay chưa. Chúng tôi muốn chức năng của mình thực thi khi DOM được tải, bây giờ hoặc sau này

Thuộc tính

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

88 cho chúng ta biết về trạng thái tải hiện tại

Có 3 giá trị có thể

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

89 – tài liệu đang tải

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

30 – tài liệu đã được đọc đầy đủ

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

31 – tài liệu đã được đọc đầy đủ và tất cả tài nguyên (như hình ảnh) cũng được tải

Vì vậy, chúng tôi có thể kiểm tra

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

88 và thiết lập trình xử lý hoặc thực thi mã ngay lập tức nếu nó sẵn sàng

Như thế này

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

0

Ngoài ra còn có sự kiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

33 kích hoạt khi trạng thái thay đổi, vì vậy chúng tôi có thể in tất cả các trạng thái như thế này

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1

Sự kiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

33 là một cơ chế thay thế để theo dõi trạng thái tải tài liệu, nó đã xuất hiện từ lâu. Ngày nay ít dùng

Hãy xem toàn bộ dòng sự kiện để biết đầy đủ

Đây là tài liệu có

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

35,

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

4 và các trình xử lý ghi nhật ký sự kiện

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

2

Ví dụ hoạt động là trong sandbox

đầu ra điển hình

[1] trạng thái sẵn sàng ban đầu. Đang tải
[2] trạng thái sẵn sàng. tương tác
[2] Đã tải DOMContent
[3] tải iframe
[4] img đang tải
[4] trạng thái sẵn sàng. hoàn chỉnh
[4] tải cửa sổ

Các số trong ngoặc vuông biểu thị thời gian gần đúng khi nó xảy ra. Các sự kiện được gắn nhãn với cùng một chữ số xảy ra gần như cùng một lúc (± vài mili giây)

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

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ổ.

Làm cách nào để tải một trang bằng JavaScript?

Cách tiếp cận. Chúng ta có thể sử dụng cửa sổ. thuộc tính vị trí bên trong thẻ tập lệnh để tải mạnh một trang khác trong Javascript . Nó là một tham chiếu đến một đối tượng Vị trí, nó đại diện cho vị trí hiện tại của tài liệu. Chúng tôi có thể thay đổi URL của một cửa sổ bằng cách truy cập nó.

Điều gì có thể được sử dụng thay cho tải trong JavaScript?

sẵn sàng(hàm(){ $('#a')

Làm cách nào để đặt thời gian tải trong JavaScript?

Chúng tôi sử dụng hàm setTimeout() trong JavaScript để tải trang web sau một khoảng thời gian. Hàm này đợi vài giây rồi tải trang web. Chúng ta cũng có thể áp dụng phương thức setInterval() để thực hiện tác vụ của mình.

programming javascript