前の関連記事：SyntaxHighlighterにfleXcroll(4)IEだけ$(window).loadのタイミングが違うらしい
$(window).loadを使うとfleXcrollのスクロールバーの表示が絶対最後になってしまいます。$(window).loadを使うのはやめてｊQuery.Deferredで直列処理にすればwindowがloadされる前に表示が完了すると思いましたがそうはいきませんでした。
いくら他のパーツを非同期にしても$(window).loadは最後にしか実行されない
SyntaxHighlighterのスクロールバーをfleXcrollにしようとすると、SyntaxHighlighterによるコードの出力が終わった後に、そのtableのheightを取得し、syntaxhighighlithgerクラスにheightを設定してfleXcrollを適用する、という流れになります。
tableのheightを取得し設定するのはjQueryを使っています。
SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法でみたように$(document).readyではSyntaxHighlighterのtableの出力とタイミングが合わず$(window).loadを使っていました。
しかし$(window).loadを使うと動作するのが一番最後になってしまいます。
SyntaxHighlighterのtableの出力が終わってからheihgtを取得設定すればよいので、それができればページの全体の描画を待つ$(window).loadを使う必要性はありません。
いろいろ調べて結果Promiseを使えばそれができそうなことがわかりました。
ｊQueryではこのPromiseを拡張したjQuery.Deferredが実装されています。
$(window).loadを使うのはやめてjQuery.DeferredでSyntaxHighlighter→tableのheightを設定→fleXcrollの直列処理にしようと思いました。
SyntaxHighlighter自体がwindowがloadされた後で実行されているらしい
SytaxHighlighterの結果が出力されるまでPromiseをunfulfilledにしておき、結果が出力されたらPromiseをfulfilledにして続くtableのheightの設定の処理に続けるようにしようと思いました。
PromiseについてはjQuery.Deferred学習メモ(1)$.DeferredでPromiseを操作するで詳しく学習しました。
Blogger:SyntaxHighlighter(6)オートローダーを使う場合と使わない場合の表示速度の比較でオートローダーを使わないほうが表示速度が早くなるということがはっきりしたのでオートローダーの使用はやめます。
すると読み込まないといけないjsファイルはshCore.jsと使用するブラシファイルだけになります。
$.getScript()でこららのjsファイルを読み込んで.done()してみましたがいろいろ組み合わせてみてもSyntaxHighlithger自体を動作するようにはできませんでした。
いろいろいじっていると SyntaxHighlighter.all();でSyntaxHighlighterの表示がされていることがわかりました。
ここにPromiseを設定すればよいのでは？、と思ってshCore.jsのソースをみてみました。
/**
* Main entry point for the SyntaxHighlighter.
* @param {Object} params Optional params to apply to all highlighted elements.
*/
all: function(params)
{
attachEvent(
window,
'load',
function() { sh.highlight(params); }
);
}
この部分が SyntaxHighlighter.all();の部分だと思います。さらにattachEvent()の部分を探してみるとfunction attachEvent(obj, type, func, scope)とあります。
これはSyntaxHighlighter自体がwindowがloadされたタイミングで表示されているのではないかと思います。
SyntaxHighlighterのソースファイルを呼びだしてもなぜかSyntaxHighlighterが動きません。
やむを得ず最小化されたshCore.jsでloadをready、windowをdocumentに置換してみましたがSyntaxHighlighter自体が動かなくなりました。
結局、これ以上の探求は断念しました。
SyntaxHighlighterの出力自体がページロードした後になされるのであれば、fleXcrollを適用するためのSyntaxHighlighterのtableのheight設定をページロードの前にすることはできません。
表示速度の改善はページロード時間短縮をすることを目標にすることにしました。
0 件のコメント:
コメントを投稿