JS esegue la funzione se l'elemento è caricato - no jQuery

Question

Ho un con un ID doi e desidero manipolarlo con JavaScript quando è completamente caricato (la manipolazione utilizza le dimensioni delle immagini non fornite in il DOM).

Quello che ho cercato:

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

Questo non ha funzionato perché la divisione è stata probabilmente caricato prima ho impostato il gestore eventi. Così in breve, ciò che deve essere fatto è la seguente:

• Controllare se l'elemento viene caricato
  • in tal caso? -> funzione di callback incendio
  • se non? -> imposta un gestore di eventi con callback quando è completamente caricato.

Answer 1

Pure javascript: jsFiddle Demo utilizzando jQuery: jsFiddle Demo

(Le demo sono alcune impostazioni che è solo riempitivo per visualizzare il contenuto cambia)

Per espandere sulla nozione (solo in rari casi) di utilizzare i timer per monitorare il contenuto di un elemento. Il contenuto da osservare sarebbe più che probabile una combinazione di testo, html, larghezza e altezza. Ecco un modo per monitorare quelli:

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 estensione

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

Per un'immagine, è possibile controllare la sua proprietà width. Se è diverso da zero, l'immagine è stata caricata, o almeno caricata in misura sufficiente a conoscere le sue dimensioni.

Answer 3

È forse possibile utilizzare la transitionend event se le dimensioni sono l'unità di misura.

Impostare una transizione CSS per quell'elemento (utilizzando JS) e associare un listener di eventi a quell'elemento. Se si utilizza semplicemente JS, è necessario ripetere le chiamate addEventListener con i prefissi dei fornitori.

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