MS Access Tips/Sample and VBA and Blog customize etc...

ブログパーツを遅延読み込みでページ表示の高速化

当ブログでブログパーツをいくつか配置しているのですが、ものによっては重いものがあったり、サーバーが混んでいて重くなっていたり、ダウンしていて読み込めなかったり、することがあります。ブログパーツは記事の後に配置してあるので記事が表示されないと言うことはないのですが、ブログパーツの読み込みがすべて終わりページ読み込みが完了しないと、JQueryのプラグイン(FancyBox, PageScrollerなど)が動作しません。

ブログパーツの読み込みが終わる前にFancyBox等が動作するようにならないか思い悩んでいました。で、たまたま「あわせて読みたい」に表示されていたリンク先で、
Movable Type 備忘録 - LazyDocWrite with jQuery を見つけました。作者さんの解説によると

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

これを使えばなんとかなりそうかなと挑戦してみました。

さらにjQueryプラグインの Timer を使って希望の動作になりました。

難易度:

上記のMovable Type 備忘録さんのページより、jquery.lazydocwrite.zip をダウンロードします。解凍してテンプレートのHTMLで読み込んでおきます。

さらに、Timerプラグインも上記のページからコピーしてテンプレートHTMLに導入しておきます。

まずは、Movable Type 備忘録 さんのページにもサンプルコードがある AddClips を遅延読み込みしてみました。

当ブログで実際に使っているコードは下記のようになりました。

遅延読み込みスクリプトコード

$('.addclips').LazyDocWrite('http://js.addclips.org/v2/addclips.js', function(elem) { 
    var param = elem.attr('title').split('|'); 
  
  AddClipsId = '22EE12F32DBBC';
  AddClipsBcolor='#000000';
  AddClipsNcolor='#333333';
  AddClipsTcolor='#ffffff';
  AddClipsType='0';
  AddClipsVerticalAlign='top';
  AddClipsDefault='bookmark';
    AddClipsUrl   = param[0]; 
    AddClipsTitle = param[1]; 
});

HTMLマークアップ

次に、ACR WEBさんの ページランキング 、これは簡単でした。

p>遅延読み込みスクリプトコード

HTMLマークアップ

次に、FC2拍手ランキング 、これも簡単でした。

p>遅延読み込みスクリプトコード

HTMLマークアップ

以上のような感じで簡単に導入できました。ただ、BlogPeople はリンクはうまく表示できるのですが、なぜか広告だけ文字化けするので、遅延読み込みは断念しました。

遅延読み込み(ページ読み込みの最後で読み込み)はできるのですが、これだけでは、やはり、FancyBox等のスクリプトはブログパーツの読み込みが終了しないと動作しません。そこで、Timerプラグインで読み込みのタイミングを遅らせます。


拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/212-0b302942
該当の記事は見つかりませんでした。