動的要素に対する処理をしたい事が増えているけど、
他の動的要素のタイミングだったりの条件で左右されたりと
動的要素の出てくるタイミングってなかなか難しく。
だからといって、サイトが重くなるような方法はなるべく避けたい。
状況によって、適した方法を選びたいけど、毎回苦戦しちゃうんだな・・・
javascriptでサイトの読み込み後にエリアの操作をしたい場合、
大体は、以下どれかのような感じでタイミングを計るのですが。
JavaScript
document.addEventListener("DOMContentLoaded", function() { //DOMの解析が完了した時点で実行
// 処理
});
document.addEventListener('readystatechange', function(){ //ロードのステータスが変化したら実行
if(document.readyState === 'interactive'){ // interactiveに変化したとき実行
// 処理
}
if(document.readyState === 'complete'){ //completeに変化したとき実行
// 処理
}
});
window.addEventListener('load', function(){ //すべてのデータの読み込みが完了した時点で実行
// 処理
});何なら、操作したいHTMLエリアに「onload=”xxxxxx()”」のようにjavascriptを呼べば良いのだけど、
今回は自分でHTMLを書き換えられない部分のエリアで、
かつ、動的に作成されている（から表示が遅い）エリアを操作したかったので。
苦肉の策で、以下の通り。
JavaScript
var counter = 0;
interval_xxxx = setInterval(function() { // 0.1秒ごとにquantity読込チェック実行
if (document.getElementById( "xxxx" )) {
console.log("xxxx : ","OK");
var element = document.getElementById( "xxxx" ) ;
// 処理
clearInterval(interval_xxxx); // 繰り返しを停止
} else {
counter = counter + 1;
console.log("xxxx : ","null"," counter : ",counter);
if ( counter > 20 ) {
clearInterval(interval_xxxx);
}
};
}, 100);
