Question

我有div，ID为doi，我希望在完全加载时使用JavaScript操作它（操作使用DOM中未提供的图像尺寸）。

我尝试了什么：

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

这不起作用，因为在我设置事件处理程序之前可能已加载除法。简而言之，需要做的是：

检查元素是否已加载
- 若然？ - ＆GT;火回调函数
- 如果没有？ - ＆GT;完全加载时设置一个带回调的事件处理程序。

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

Answer 2

对于图像，您可以检查其width属性。如果它不为零，则图像已加载，或者至少加载到足以使其尺寸已知。

Answer 3

如果尺寸是您的测量单位，您可以使用transitionend event。

为该元素设置CSS转换（使用JS）并将事件侦听器绑定到该元素。如果使用普通JS，则必须使用供应商前缀重复addEventListener次调用。

#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.

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

3 个答案: