LazyDocWrite with jQuery

• Jan202009
• Vote:
  http://bizcaz.com/archives/2009/01/20-230717.php
• Categories: jQuery
• Tags: jQuery
• Social Bookmark

• Prev Page: jQuery 1.3.0 リリース
• Next Page: jQuery 1.3.1 リリース

こんばんわ^^

ブログパーツは少なからずもみなさん使われてるかと思いますが、ブログパーツによっては非常に重たかったりしますよね。
JavaScript の特性上、その応答が返らないとページを最後まで表示しきることができません。

ということで、こちらの Ajaxでdocument.writeするJavaScriptへの対策 を参考に、ページ表示中の document.write を抑制というか退避みたいなものを jQuery で作ってみました (●´∀｀●)

カンタンに説明すると、JavaScript の document.write を配列に push するファンクションに置き換えて、ページが表示された後で一気に表示みたいなことをやります。

jQuery のプラグインで画像の遅延読込みする LazyLoad というものがあります。
これの JavaScript 版といったところでしょうか。

• LazyLoad with jQuery

わたしのサイトでは残念なことに、だいぶ前に Google AdSense のアカウントを剥奪されてしまいました（つω-`｡）
当時流行ってた!? Google AdSense 狩りってのに見舞われたのかどうか分かりませんが、急なメルでショックだったのを覚えてます。
そんな Google AdSense でも、確認はできませんが対応できると思います。

ダウンロード

• jquery.lazydocwrite.zip

使い方

使い方は少し jQuery のお作法を知ってる必要があります。
とはいっても、決まった書き方なので知らない人でもミヨウミマネでできるのではないかと･･･甘いかな (;￣∇￣A

コードは以下のようになります。

青字は jQuery のセレクタです。 JavaScript の実行結果を表示する先を指定してください。
赤字には遅延読込みさせたい JavaScript の URL を指定します。必須です。
緑字には JavaScript 実行前に何らかの処理をさせたい場合に、そのファンクションを指定します。不要なら 'null' を指定します。
ピンク字には JavaScirpt 実行後に何らかの処理をさせたい場合に、そのファンクションを指定します。不要ならやっぱり 'null' を指定してください。

参考例

1. たとえば、わたしのサイトでも使ってるソーシャルブックマークの AddClips を遅延読込みさせた例を以下に記します。

   遅延読込みコード例

   1. $('[@class~=addclips]').LazyDocWrite('http://js.addclips.org/v2/addclips.js', function(elem) {
   2.     var param = elem.attr('title').split('|');
   3.  
   4.     AddClipsId = '14012F341B277';
   5.     AddClipsBcolor='#000000';
   6.     AddClipsNcolor='#333333';
   7.     AddClipsTcolor='#ffffff';
   8.     AddClipsType='1';
   9.     AddClipsVerticalAlign='middle';
   10.     AddClipsDefault='bookmark';
   11.     AddClipsUrl = param[0];
   12.     AddClipsTitle = param[1];
   13.     AddClipsMode='popup';
   14. });

   上記はわたしのサイトで実際に使ってるコードになります。
   AddClips の JavaScript 実行前に AddClips のパラメータ設定を行わせます。その際、 AddClips の場合にはブログ記事タイトルとブログ記事 URL が個別に必要なので、以下のようなマークマップにしてます。

   マークアップ例

   1. <ul>
   2.     <li class="addclips" title="ブログ記事 URL|ブログ記事タイトルSocial Bookmark</li>
   3. </ul>

   青字の部分には 'addclips' というクラス名を振っておくことですべての addclips を対象とさせてます。
   赤字では tiltle 属性として、ブログ記事の URL と ブログ記事タイトルを 「|」で区切った文字列を埋め込んでおくことで、個別に AddClips の遅延実行が可能になります。

2. 次に ブログチャート の遅延読込み例を以下に記します。

   遅延読込みコード例

   1. $('#blogcart').LazyDocWrite('http://blogchart.jp/js/blogparts.js', null, function() {
   2.     id='7756';blogurl='http://bizcaz.com/';partstype='w';viewBlogparts();
   3. });

   ブログチャートの場合には、JavaScript 実行後にパラメータの設定などを行う必要があるので、上記赤字のように実行前ファンクションには 'null' を指定して、その次の実行後ファンクションを記述します。
   マークアップは以下のようになります。

   マークアップ例

   1. <div class="blogchart" id="blogcart">Loading...</div>

3. 最後に wowzio の遅延読込み例を記します。

   遅延読込みコード例

   1. $('#wow_wwrapf6ef').prepend('<div id="wowzio"></div>');
   2. $('#wowzio').LazyDocWrite('http://widgets.wowzio.net/widgets/jscript?wtype=activity&w=auto&h=362&ti=Movable%20Type%20MEMO&tc=FFFFFF&hc=FFFFFF&bc=000000&txc=CCCCCC&lc=FFFFFF&ni=10&tx=DESIGNER_DARK&ap=yes&ii=yes&ir=yes&sb=yes&sv=3&cid=0&ef=fade&ids=43213');

   wowzio の場合には、セレクタ( '#wow_wwrapf6ef' )の子要素として <div id="wowzio"></div> を追加しています。
   追加した '#wowzio' 内に JavaScript の遅延読込み結果を流し込んでます。

   マークアップは以下の通りです。

   マークアップ例

   1. <div id='wow_wwrapf6ef'><div id='wow_signf6ef'><a id='wow_srf6ef' href='http://www.wowzio.com' title='Live Activity Feed Blog Widgets'>Wowzio</a><div id='wow_slf6ef'><a class='wow_bl bl_f' id='gwl_f6ef' href='http://www.wowzio.com/widgets/designer?ids=43213&amp;wtype=activity&amp;cid=26' title='grab/edit this widget'>grab this</a> &amp;middot; <a class='wow_bl' id='sml_f6ef' href='http://www.wowzio.com/widgets/seewidgets?ids=43213&amp;cid=26' title='widgets for Movable Type 備忘録'>gadgets</a> blog</div></div></div>

以上が使い方の参考例になります。パターンとしては、

• JavaScript 実行前にパラメータの設定が必要なもの
• JavaScript 実行後にパラメータの設定が必要なもの
• パラメータが不要なもの

というように分類できるかと思います (￣∇￣)b
こんなかんじで Google AdSense なども使えるのではないかと思います。

良かったら使ってみてください (●´∀｀●)

• Related Entries
• 09/12/06ブラウザスクロールに連動するサイドバー
• 09/11/29かんたんスターレーティング( jquery.sexyvote.js )
• 09/11/27TopUp
• 09/05/18リファラ・ランキング・プラグイン（jquery.pagerank.js）
• 09/03/16すべてのブログのアクセスランキングを表示する（jquery.pagerank.js）
• 09/03/15ローテーションするアクセスランキング（jquery.pagerank.js）
• 09/01/24Updated Today with jQuery
• 09/01/17jQuery 1.3.0 リリース
• 09/01/03Sparklines with jQuery
• 09/01/01iframe with jQuery

• Edit
• Permalink
• 1 Comment
• No TrackBacks