jQuery.html (thứ gì đó) phát hiện khi quá trình tiêm hoàn tất

Question

Tóm lại, tôi muốn gọi lại sau khi html đã được tiêm và nội dung của html đó đã được hiển thị. Lý do là tôi cần phải biết chiều cao của nội dung mới ngay lập tức. Một cái gì đó như thế này:

$('div').html(tonsofstuff); 
    console.log($('div').height()); //works in Firefox, but returns 0 in Chrome 
    setTimeout(function(){ 
     console.log($('div').height()); //works everywhere, but takes too long 
    },3000); 

Vấn đề đôi khi ở một số trình duyệt (và luôn ở dạng chrome) $ ('div'). Height() kích hoạt trước nội dung mới có chiều cao.

tưởng tượng của tôi:

$('div').html(tonsofstuff, function(){ 
     console.log($('div').height()); 
    }); 

    or even 

    $('div').html(tonsofstuff).load(function(){ 
     console.log($('div').height()); 
    }); 

Answer 1

Đây là những gì tôi làm:

var height = $('div').html(tonsofstuff).height(); 

Tôi chưa bao giờ có bất kỳ vấn đề với chờ đợi cho nó để render.

Answer 2

Nếu sự cố xảy ra trong Chrome, tôi giả sử rằng nội dung bạn đang chèn có chứa hình ảnh. Chrome không tính toán các hình ảnh của các hình ảnh cho đến khi chúng được tải hoàn toàn (DOM sẵn sàng chưa đủ). Vì vậy, những gì có thể bình thường sửa chữa vấn đề là thực hiện rendering của bạn trên sự kiện window.onload. Bằng cách này, bạn đảm bảo rằng hình ảnh được tải và .height()/.width() sẽ hoạt động tốt. Mặc dù tôi nhận ra rằng không phải lúc nào cũng có thể xảy ra vì sự kiện window.onload bị sa thải nhiều sau đó DOMContentLoaded.

Một cách tiếp cận khác là chỉ định rõ ràng hình ảnh một cách rõ ràng thông qua các thuộc tính width và height của thẻ hình ảnh tương ứng. Điều này có thể hoạt động nếu bạn biết kích thước hình ảnh. Trong trường hợp này, không cần thực hiện logic của bạn trên window.onload.

Answer 3

Nếu "tấnofstuff" của bạn có hình ảnh, cuộc tấn công setTimeout là phương pháp sai. Bạn cần biết khi nào mỗi hình ảnh được tải, sau đó thực hiện các phép tính chiều cao DOM của bạn. Và cho rằng, tốt, bạn có thể phải nhìn vào html để tải, tìm thấy những hình ảnh, và sử dụng một cuộc gọi đến somethig như Image Preloader Plugin. Tôi không nhất thiết phải giới thiệu nó; nó khá tầm thường để viết của riêng bạn (mặc dù có thể có một số gotchas với phương pháp nhất định). Tôi chỉ biết có những thứ như thế này mà nên hoạt động khá tốt.