Home > Internet > Web関連 > Javascript表示のタイミングを変更する

Javascript表示のタイミングを変更する

カウンター替わりのハーボットや、トラックワードなど、このサイトではいくつかの外部スクリプトが使われています。しかし、時々相手側のサーバーダウンや過負荷により、ページの読み込みが途中で止まってしまう現象がたびたび見られました。小粋空間さんの所で、その問題に解消する方法が紹介されていました。

仕組みを説明しますと、リンクリストのタグはとりあえずページの一番最後に埋め込み、それを JavaScript を使って別の位置に再表示するという作戦です。

[小粋空間:BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）]

確かに実際に読み込みが止まるところは、該当するスクリプトを読み込む部分でした。という訳で、早速これを導入してみる事にします。ちなみに、もう一つAjaxでの読み込みというのもありますが、今回はやめておきます。小粋空間: BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）ちなみに、asiamothさんがこの辺について、ちょっと風変わりなアプローチをして下さってます。

JavaScript を利用して外部の JavaScript を読み込む方法は、いろいろ考えられます（ref: JavaScriptな日々 | 外部JavaScriptファイルの動的・静的ロードの方法）。今回は、表示までに時間がかかるスクリプト（おそらく document.write が原因）のせいで、ページ全体の表示が遅くなる、という問題にしぼって考えてみます。

[表示の遅い JavaScript を JavaScript で何とかしたい！ : 亜細亜ノ蛾 - Weblog]

ほ～！、最近解ってきたんだけど、DOM要素の置換が中途半端に行われちゃうようなケースには、document.getElementById()部分を$()にする事で、prototype.jsの動作を作動条件に出来るかもしれないでしょ。これって結構便利だと思うんだけどなぁ・・・　と適当な意見！

さて、実際のやり方は元サイトを見てもらうとして、若干の追加部分だけ・・・
私のサイトもそうですが、MT3.3以降でWidget機能使ってるところも多いと思うのですが、このカスタマイズにはマイナス点もあります。ダミーのブロックと実際のJavascriptの読み込み位置を放す関係で、一つのWidget内にまとめる事ができなくなる点です。
仕組み的にはこれはしょうがない部分だと思います。
私は今まで中身を表示していたWidgetを空ブロック表示に。
また実際のJavascript読み込みを行う部分を、新規にWidgetとして作成し、body要素の一番最後でインクルードする事にしました。
読み込み用Widgetでは、複数のJavascriptの読み込みを指定してあります。

なお、元サイトでも触れられてますが、実際にスクリプトから応答がなかった場合には、DOM要素の置き換えが発生しないため、Loading表示が残ったままになります。ここら辺が気になる場合はAjax編の方が良さそうに思えます。またDOM要素に正しく対応してないブラウザだと変な動きをしてくれますね。
この辺は何か対策を考えなくちゃいけないみたいです。

以前と比べれば、少し読み込みがスムーズになった気がします・・・