Đợi phương thức jquery .html để kết thúc hiển thị

Question

Tôi có div với thanh cuộn dọc. Div đang được cập nhật động thông qua ajax và html được chèn bằng cách sử dụng phương thức .html của jQuery. Sau khi div được cập nhật thanh cuộn trở về đầu trang và tôi đang cố giữ nó ở vị trí trước đó.

Đây là cách tôi đang cố gắng nó:

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos 
$.ajax({... 
    success: function(data) { 
     $('div#some_id').html(data.html_content); //insert html content 
     $('div#some_id').scrollTop(scrollPos); //restore scroll pos 
    } 
}); 

này thất bại. Đoán tốt nhất của tôi là nó không thành công do chèn html không được hiển thị (nghĩa là không cuộn).

Ví dụ: công trình này.

setTimeout(function(){ 
    $('div#some_id').scrollTop(scrollPos); 
}, 200); 

Nhưng điều này thật là bẩn trong quan điểm của tôi. Tôi không có cách nào để biết rằng một số trình duyệt sẽ không mất nhiều hơn thì 200ms này để hiển thị nội dung được chèn.

Có cách nào để chờ trình duyệt kết thúc hiển thị html đã chèn trước khi tiếp tục không?

Answer 1

Nó vẫn là một hack, và có thực sự là không có gọi lại sẵn sàng cho khi HTML được đưa vào thực tế và sẵn sàng, nhưng bạn có thể kiểm tra xem các yếu tố trong html_content được chèn mỗi 200ms để chắc chắn rằng họ thực sự đã sẵn sàng, vv

kiểm tra yếu tố cuối cùng trong HTML từ cuộc gọi ajax:

var timer = setInterval(function(){ 
    if ($("#lastElementFromAjaxID").length) { 
     $('div#some_id').scrollTop(scrollPos); 
     clearInterval(timer); 
    } 
}, 200); 

Đối với một tùy chọn cao cấp hơn bạn có thể có thể làm điều gì đó như thế này mà không cần khoảng thời gian, và ràng buộc nó vào DOMnodeInserted, và kiểm tra xem yếu tố cuối cùng là được chèn vào.

Answer 2

callback như vậy không tồn tại vì .html() luôn luôn làm việc đồng bộ

Answer 3

tôi sẽ chỉ muốn chỉ ra một sự khác biệt ở đây: Một điều, là khi .html() đã hoàn thành tải, nhưng trình duyệt thực sự làm cho nội dung là một cái gì đó khác nhau. Nếu nội dung được tải có phần phức tạp, như bảng, div, kiểu css, hình ảnh, v.v. - kết xuất sẽ hoàn thành phần nào muộn hơn tất cả các phần bổ sung dom có ​​trên trang. Để kiểm tra xem mọi thứ có ở đó không, không có nghĩa là kết xuất hoàn tất. Tôi đã tìm kiếm một câu trả lời cho điều này một mình, như bây giờ tôi sử dụng chức năng setTimeout.

Answer 4

Nếu bạn đang chờ đợi tải hình ảnh, có một cách tiếp cận https://github.com/desandro/imagesloaded