Khi trang tải lần đầu tiên, chúng tôi có thể sử dụng window.onload để đảm bảo rằng tất cả các tài nguyên đã được tải trước khi chúng tôi làm điều gì đó.window.onload tương đương sau khi sửa đổi DOM?
Câu hỏi của tôi là, nếu chúng tôi sửa đổi DOM (ví dụ: chèn một số html dựa trên yêu cầu ajax), có sự kiện nào sẽ kích hoạt khi tài liệu ở trạng thái 'được tải' lần nữa không? (ví dụ: khi chèn html chứa nhiều hình ảnh).
(Giải pháp với jQuery sẽ ổn).
Câu trả lời ngắn: KHÔNG.
Câu trả lời dài: nếu bạn biết những gì bạn đang tìm kiếm, bạn có thể sử dụng các nhà quan sát đột biến (https://developer.mozilla.org/en-US/docs/DOM/MutationObserver). nó chỉ hỗ trợ trong trình duyệt mới, và trong một số phiên bản của chrome nó có rò rỉ bộ nhớ khi được sử dụng với các bao đóng.
BTW, document.ready không cho bạn biết nếu tất cả (hoặc bất kỳ ..) nào của tài nguyên đã được tải. nó chỉ cho bạn biết rõ, rằng dom đã sẵn sàng (đó là chức năng tải, sẽ chỉ kích hoạt sau tất cả các tài nguyên (tốt, mọi tài nguyên không được yêu cầu sử dụng javascript) đều được tải xuống).
Bạn có thể sử dụng .done().
Mô tả: Thêm trình xử lý được gọi khi đối tượng Trì hoãn được giải quyết.
Cũng có jQuery plugin See Here
Không chắc tôi theo Dipesh. Tôi có thể đính kèm một lời hứa với lời gọi ajax, nhưng điều này sẽ chỉ cho tôi biết khi nào tôi có dữ liệu, không phải về bất kỳ tài nguyên nào đã bắt đầu tải sau khi tôi chèn nó vào DOM. Hay bạn ám chỉ điều gì khác? – UpTheCreek
tôi sẽ nói YES (Tôi không biết nếu điều này được hỗ trợ bởi tất cả các trình duyệt. Tôi sử dụng nó trong Safari và Chrome)
testcase bạn có thể tìm thấy ở đây : http://maakmenietgek.nl/testcases/domready/ Xin lưu ý rằng tôi không thể có được nó làm việc trong một fiddle, đó là lý do tại sao một độc lập testcase
Các index.html trông như thế này
<!DOCTYPE html>
<head>
<title>Testcase</title>
<script src="jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#clickme').click(function() {
$.get('ajaxdata.html', function(data) {
$('#addhere').html(data);
});
});
})
</script>
</head>
<body>
<p id="clickme">clickme</p>
<div id="addhere">
</div>
</body>
</html>
Các dữ liệu được nạp với $.get gọi trông như thế này
<p>added data</p>
<script type="text/javascript">
$(document).ready(function() {
alert('added data');
});
</script>
Cảnh báo cho thấy sau khi html đã được thêm vào DOM
@Felix - Tôi không muốn để phát hiện thay đổi đối với DOM , Tôi muốn phát hiện khi tài nguyên đã được tải sau khi tôi thay đổi DOM. Tất cả những câu hỏi bạn tham khảo là về phát hiện thay đổi. – UpTheCreek
Có thể bạn nên nêu rõ điều này sau đó. DOM đang sẵn sàng và tất cả các tài nguyên được tải đều là hai thứ khác nhau. –
Chỉ cần làm rõ, vì bạn dường như không phân biệt giữa tải và sẵn sàng, trong jQuery .load() xảy ra khi trang được hiển thị hoàn toàn, trong khi .ready() xảy ra ngay khi phân cấp DOM được xây dựng. Nếu mã của bạn dựa vào các tài sản đã tải (ví dụ, bạn cần lấy kích thước của một hình ảnh), bạn nên sử dụng .load() để đảm bảo rằng mã của bạn được thực thi khi tất cả các tài sản cần thiết có sẵn. Nếu không, bạn có thể sử dụng .ready() để tăng tốc độ mọi thứ, vì mã của bạn sẽ được thực thi trong khi hiển thị. – excentris