JS thực hiện chức năng nếu phần tử được tải - không có jQuery

Question

Tôi có một số div có id là doi và tôi muốn thao tác nó bằng JavaScript khi được tải đầy đủ (thao tác sử dụng kích thước của hình ảnh không được cung cấp trong DOM).

gì tôi đã cố gắng:

document.getElementById('doi').onload = function(){ 
     console.log('Div of Interest is loaded'); 
    }; 

này đã không làm việc vì các bộ phận có lẽ nạp trước khi tôi thiết lập các tổ chức sự kiện Handler. Vì vậy, đối ngắn, những gì cần phải được thực hiện như sau:

• Kiểm tra xem phần tử được nạp
  • nếu như vậy? -> Chức năng gọi lại bằng lửa
  • nếu không? -> đặt trình xử lý sự kiện với gọi lại khi được tải đầy đủ.

Answer 1

javascript tinh khiết: jsFiddle Demo Sử dụng jQuery: jsFiddle Demo

(Các bản demo bao gồm một số thiết lập mà chỉ là phụ để hiển thị nội dung thay đổi)

Mở rộng trên khái niệm (chỉ trong trường hợp hiếm hoi) sử dụng bộ tính giờ để theo dõi nội dung của phần tử. Nội dung được quan sát sẽ nhiều hơn khả năng là một sự kết hợp của văn bản, html, chiều rộng và chiều cao của nó. Dưới đây là một cách để theo dõi những:

javascript

function monitor(element,callback){ 
var self = element; 
var h = self.clientHeight; 
var w = self.clientWidth; 
var txt = self.innerText; 
var html = self.innerHTML; 
(function flux(){ 
    setTimeout(function(){ 
     var done = 
      h == self.clientHeight && 
      w == self.clientWidth && 
      txt == self.innerText && 
      html == self.innerHTML; 
     if(done){ 
     callback(); 
     }else{ 
     h = self.clientHeight; 
     w = self.clientWidth; 
     txt = self.innerText; 
     html = self.innerHTML; 
     flux(); 
     } 
    },250); 
})() 
}; 

jQuery mở rộng

$.fn.monitor = function cb(callback){ 
var set = this.first(); 
var h = set.height(); 
var w = set.width(); 
var txt = set.text(); 
var html = set.html(); 
(function flux(){ 
    setTimeout(function(){ 
     var done = 
      h == set.height() && 
      w == set.width() && 
      txt == set.text() && 
      html == set.html(); 
     if(done){ 
     if($.isFunction(callback))callback(); 
     }else{ 
     h = set.height(); 
     w = set.width(); 
     txt = set.text(); 
     html = set.html(); 
     flux(); 
     } 
    },500); 
})() 
}; 

Answer 2

Đối với một hình ảnh, bạn có thể kiểm tra tài sản width của nó. Nếu nó không khác, thì hình ảnh đã được tải hoặc ít nhất được tải đủ để biết thứ nguyên của nó.

Answer 3

Bạn có thể có thể sử dụng transitionend event nếu kích thước là đơn vị đo lường của bạn.

Thiết lập chuyển tiếp CSS cho thành phần đó (sử dụng JS) và liên kết trình xử lý sự kiện với phần tử đó. Nếu bạn sử dụng JS đơn giản, bạn phải lặp lại các cuộc gọi addEventListener với các tiền tố của nhà cung cấp.

#doi { 
    -webkit-transition: width 0s linear; 
      transition: width 0s linear; 
} 

JS:

var afterWidthChange = function(event) { 
    var doi = event.target; 

    console.log('The width of #doi has changed.', doi); 
}; 

document.getElementById('doi').addEventListener('transitionend', afterWidthChange, false); 
document.getElementById('doi').addEventListener('webkitTransitionEnd', afterWidthChange, false); 

There is a lib/polyfill for older browsers too.