document.write()の実行タイミングをずらす方法

category-icon

関連エントリー: Google Adsenseの表示タイミングを制御するLink

 このサイトのppBlog's webRingのリストは、BlogPeopleLink からdocument.writeで書き出しています。というかBlogPeopleのスクリプトがそうなっているのですが。で、document.writeが、HTMLソースの最初の方にあると、document.writeによる書き出しが終わるまで、それ以降のページのレンダリング(HTMLの書き出し)はストップした状態となります。document.writeによって呼び出している外部サーバー(ここではBlogPeople)のレスポンスが速ければ、ページ描画で待たされることはありませんが、たまにはレスポンスが遅くて、ページの残りがなかなか表示されないという事態は起こりえます。このdocument.writeは、広告バナーなどでも当たり前のように使われていて、メインコンテンツの内容が知りたいのに、バナー広告がなかなか表示されず、イライラしたという経験もあるかと思います。確か、GoogleのADWordsなどでも使われているのではないでしょうか。

 こういう事態を避けるには、HTMLソースの最後の方で document.write を呼び出すというのがあり、これはこれで有効ですが、そう汎用性のあるやり方ではなく、また、スクリプト(JavaScript)がHTMLの中で、あちこちに散らばるのは美しくないです。

 ここでは、document.writeの内容をとりあえず配列などに一時的に退避させといて(この間にHTMLソースの描画は進んでいきます)、ページ読み込み完了と同時に、そのストックしておいたdocument.write内容を吐き出すという方法について書いておきます。

 まず、普通にdocument.writeを含んだ外部スクリプトを呼び出すやり方。これは、BlogPeopleがこうしましょう、と述べているものです。

<script type="text/javascript"
  src="http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js"
  charset="euc-jp"></script>

これの実際の中身は、次のようになっています。

document.write('<div class=¥'blogpeople-main¥'>');
document.write('登録されたサイト')
     :
     :
document.write('</div>');
document.write('<div class=¥'blogpeople-powered-by¥'>');
document.write('<br /><a href=¥'・・・¥' target=¥'_blank¥'><img src=¥'・・・¥' border=¥'0¥' alt=¥'Powered By BlogPeople¥' /></a>');
document.write('</div>');

ここに使われているdocument.write内容をとりあえず配列に入れておけば良いのですが、それには次のようにします。

(function(){
  var alts = []; // document.writeの内容を入れておく配列を準備 
  d._write = d.write; // オリジナルはコピーしておく
  d.write = function(s){ alts.push(s);} // d.writeを新たに定義
  var src = "http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js";
  var script = d.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('charset', 'euc-jp');
  script.setAttribute('src', src);
  d.getElementsByTagName('head')[0].appendChild(script);
  addEvent(window, "load", function(){
   o("_webRing").innerHTML = alts.join(""); // 指定した場所に流し込む
   d.write = d._write; // d.writeを元の定義に戻しておく
  });
 }());

 ポイントは、既存のdocument.writeを新たに、

document.write = function(s){ alts.push(s); }

と再定義している点です。ここではaltsという配列に退避させています。こうすることで、document.writeによる書き出しを待つことなく、残りのページレンダリングを進めていくことが出来ます。このスクリプトで、SafariでもIE6でもFirefoxでもきちんと動くことを確認しています。

 小生のブログであるmartin.p2b.jpのwebRingLink と、このサイトにあるwebRingLink とは同じ外部スクリプトを呼び出しているのですが、比較のために、このサイトのwebRingは上記の手法で、martin'sの方は従来の方法で呼び出しています。BlogPeopleのサーバーレスポンスは素早いので、なかなか差が実感できにくいかと思いますが、このサイトのやつは、(サイドバーのHTMLソースはdocument.writeよりも後にもかかわらず)サイドバーが先に表示されて、最後にwebRingのリストが表示されるのに対して、martin'sの方は、HTMLソースの順序通り、webRingリスト→サイドバーという順序で表示されています。

 ちなみに、このサイトのwebRingは、ppBlogの「ページ作成機能」を使って作成しているのですが、具体的に、どのような内容になっているのか、理解の一助のために添付しておきますね。

 まぁ、こんなアプローチもありますよということで

添付ファイル: webRing.txtattachedIcon 

 

— posted by martin at 05:09 pm   commentComment [14]  pingTrackBack [1]

この記事に対するコメント・トラックバック [15件]

scrollUp1. ぷらむ Website — 2006/07/25@19:15:51

ちょっと場違いですが。
「Ajaxでログイン認証 ― 開発日誌, May 04, 2006 (1) (0)」
とコメント数が1と表示されていますが、クリックするとコメントが出てきません。
確認をお願いします。

Owner Comment martin Website  2006/07/26@23:10:21

こんばんは。多分、スパムコメントなどを弾いたタイミングで、空のコメントファイルが生成されるためです。そのあたりcomment.inc.phpを修正してみました。

3. あゆ Website — 2006/07/26@00:04:22

>ぷらむさん
同様の現象が私のブログでも起きています。
どういう場合に、コメントが1、と表示されるのか、未だにわかっていません。
一応、エントリーも起こしてみたのですが・・・。

http://ayu.oops.jp/ppblog/index.php?UID=1153838044Link

Owner Comment martin Website  2006/07/26@23:11:10

こんばんは。多分、上の症状だと思います。

 ちなみに、動画のモブログはいかがでしょうか?

5. ぷらむ Website — 2006/07/26@05:35:08

「RC2ダウンロード再開 ― アップデート, May 23, 2006 (1)」
ここは、コメント数が67もあるが、リスト表示のコメント個数のところは、何も表示されてない。
確かにあゆさんのところでもコメント1で、実際はコメントなしの現象がありますね。

scrollUpOwner Comment martin Website  2006/07/26@23:11:54

コメント受付終了だと、こうなりますが、何だか変なので、修正しました。ありがとうございます。

7. 将門 Website — 2006/07/26@21:33:51

martin先生〜こんばんわです。
僕も「ぷらむさん、あゆさん」と同じ症状が確か、
2回あったと思います。
初めは誰かのいたずらかな・・て思って
ようす見ていたのですが、しばらくは何もなかったように
白紙のコメントありませんでしたので、
やっぱりいたずらと思っていたんですよ。
でも、最近また白紙コメントがあって、
何故かわからないんですが、同一日時の記事に
白紙コメント出ていました。
何かのきっかけで、白紙コメント出る見たいです。

あぁ〜これから、これはお願いで
「MOONBLOGテーマ研究所」でも、
「BlogPeople」にping飛ばすようにしたので
「ppBlog webRing」への登録お願いします。
pingは
http://monmon.tm.land.to/ppblog2/index.phpLink
で飛ばしています、よろしくお願いします。

Owner Comment martin Website  2006/07/26@23:13:03

こんばんは。おそらく上記理由です。最新のcomment.inc.phpでは大丈夫…かな?

 あ、webRingの件、了解しました:)

9. ぷらむ Website — 2006/07/26@21:56:51

白紙コメントか。
私のブログでは、そういったことはありません。ここのブログを見てご報告しただけです。

10. 将門 Website — 2006/07/26@22:03:45

ぷらむさん〜すません僕の勘違いですね
てっきり、あゆさんと同じ症状だと思っていました。
白紙コメントと言っても、
実際にはコメント事態は無いのですが、何故か
コメント個数が1個になっている、状態です。
同一日時の記事すべてにも、同じようにコメント数が
1個になっているのですが、コメント見ると何もない状態で
です。

scrollUpOwner Comment martin Website  2006/07/26@23:14:32

ちなみに、コメントが空のファイルがcommentsディレクトリに生成されていると思うので、UIDを確認されて削除してみるとよいと思います。

12. 将門 Website — 2006/07/27@19:57:39

martin先生〜こんばんわです。
白紙コメントはスパムコメントに関係してたのですね(++!)
さっそくアップデートしてみました。

martin先生〜いつも素早い対応ありがとう御座いました。
それから、webRingの件もありがとう御座いました。

Owner Comment martin Website  2006/07/28@07:02:43

あ、白紙コメントは、commentsディレクトリの内の該当UIDログを削除しないといけないと思います。今回のcomment.inc.phpで上書きしただけでは、既存の空コメントは消えてくれないです。

14. 将門 Website — 2006/07/28@20:15:57

martin先生〜お心遣い感謝!!
白紙コメントは調べるのとテストで、コメント書いては消して
テストの後にすべて消しました。(PPBLOG側でですが・・)
これでも、大丈夫ですよね。
いちよう、今の段階では、白紙コメント出なくなりましたよ。
martin先生〜ありがとう御座います;-)

15. LoveBlossom恋愛・結婚・占いポータルサイト Website — 2006/08/02@15:17:30

レンタルブログのような簡単なツールを探していました。最初、インストールが簡単だと言うことで、WordPressを使ってみたのですが、私にはどうもあわなかったんです。他にも、ブログスタンダードと言われて...
続き »

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0228 sec.
prev
2006.7
next
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31