ページ全体ではなく特定クラスの読み込み完了を判別したい

特定クラス(例：hoge)の読み込み完了を判別したいです。

ページ全体の読み込み判別は以下の方法があるかと思います。

lang
1$(document).ready
2$(window).load

しかし、今回動的に後から処理を加えており、大元のスクリプトの兼ね合いで「$(document)」「$(window)」が使えない事情があります。

ご教授のほどよろしくお願いいたします。

行動規範の内容に同意します

回答2件

読み込みたいHTML要素の直後にscript要素を置いて下さい。

HTML
1<p id="sample">sample</p>
2<script>
3document.getElementById('sample');
4</script>

</head> 内で読み込みを検知する場合は setInterval で document.getElementById('sample') を監視する方法がありますが、「一定時間置き」に監視するだけなので多少のタイムラグがあり、完全な同期読み込み検知ではありません。

しかし、今回動的に後から処理を加えており、大元のスクリプトの兼ね合いで「$(document)」「$(window)」が使えない事情があります。

それは書き方の問題で「他のスクリプトとの兼ね合い」を何とかするのが一般解だと思います。
アルゴリズムを見直してみてはどうでしょうか。

Re: castailさん

投稿2015/12/08 04:37

think49

総合スコア18162

castail

2015/12/12 08:30

ご回答ありがとうございました。もちろんその方向性も検討しましたが、不可であったためご質問した次第です。

think49

2015/12/13 01:02 編集

「script要素の置き場所を変更できず、setInterval による監視も出来ない」という事でしょうか。前者はともかく、後者が出来ない理由というのがちょっと思いつきません…。もう少し、出来ない理由を詳しく書いていただけると代替案が出てくるかもしれません。 tozjpさんもいわれていますが、特定の要素を読み込む時にイベントは発生しないので正攻法というものが存在しません。その為、何かを諦めて何かをとるような割りきりが必要ですが、その為には背景を明らかにしておく必要があります。

行動規範の内容に同意します

MutationObserver という API が用意されています。
あるノードの下で変化があったらイベントが発火するというものです。
ただ、ちょっと大げさな気がします。

もう少し詳しく状況がわかれば、ロードの完了やノードの挿入を監視するといった方法よりも良い解決策がありそうです。
動的に処理を加えているのであれば、処理の直後に毎回要素が挿入されたかをチェックするのがいいのではないでしょうか。

投稿2015/12/08 03:00

tozjp

総合スコア790

castail

2015/12/12 08:29

ご回答ありがとうございました。なるほどそういうAPIが存在するのですね。調べてみたいと思います。

tozjp

2015/12/12 13:29 編集

調べてみるとおっしゃったので大丈夫だと思いますが、一応訂正します。イベントの発火というのは間違いです。正しくはコールバック関数が直接呼ばれるだけです。 MutationObserver は情報が豊富でなくとっつきにくいですし、実際やってみても正攻法じゃないというか、本当に最後の手段という感じがするんですよねー。深く使いこなせばそうではないのかもしれませんが。 MutationObserver の方にご反応いただいていますが、僕の回答においては後者の方法を推したつもりです。後者の方法が実現できないのなら、その原因となっている状況を説明したうえでいい方法がないか質問するのはいかがでしょうか。確定的な情報を知らずに無責任なことを言ってしまいますが、 (おそらくですが…) そのほうが結果的にはシンプルで分かりやすい方法を入手できるような気がしています。

think49

2015/12/13 01:00 編集

確かに <head> 内で document.documentElement を監視すればいけそうですが、全監視なので負荷も高そうですよね…。ところで、MutationObserver は IE10- が未対応です。その為、Webサイトの動作保証ブラウザによっては選択肢になりえないのでご注意ください。 http://caniuse.com/#feat=mutationobserver https://developer.mozilla.org/ja/docs/Web/API/MutationObserver 詳しく見ていませんが、IE11 にもバグがあるようですね。 https://connect.microsoft.com/IE/feedback/details/817132/ie-11-childnodes-are-missing-from-mutationobserver-mutations-removednodes-after-setting-innerhtml

行動規範の内容に同意します

あなたの回答