如果加载了元素,JS执行函数 - 没有jQuery

Question

我有一个divid doi,并且我希望在它完全加载时用JavaScript操纵它(操作使用DOM中没有提供的图像的尺寸).

我尝试了什么:

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

这不起作用,因为在我设置事件处理程序之前可能已加载除法.简而言之,需要做的是以下内容:

• 检查元素是否已加载
  • 如果是这样？ - > fire callback功能
  • 如果不？ - >在完全加载时设置带回调的事件处理程序.

Answer 1

纯 JavaScript：jsFiddle Demo 使用 jQuery：jsFiddle Demo

（演示包括一些设置，这些设置只是填充以显示不断变化的内容）

扩展使用计时器来监视元素内容的概念（仅在极少数情况下）。要观察的内容很可能是其文本、html、宽度和高度的组合。这是监视这些的一种方法：

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 扩展

$.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);
 })()
};