「javascript」タグアーカイブ

JavaScript 読み込みの並列化

コメントを残す

JavaScript の並列読込Safari, IE8 以外のブラウザでは JavaScript の読み込み中は、画像や CSS、他の JavaScript ファイルなどの読込処理がブロックされる。
これをDOM経由で動的にロードすると、並列で読み込まれるようになりますよと言うお話。
元ネタは、マイコミジャーナルの「JavaScript読み込みブロック回避でページ表示を高速化する方法」と言うエントリ。
右図が、当サイトに実装した際の Firebug のネットワークモニタ結果(JavaScriptのみ)。(クリックで拡大されます)
確かに並列読み込みされている。

JavaScript の並列読込処置前比較のために実装前の Firebug のネットワークモニタ結果(JavaScriptのみ)も載せておきます。
一つの JavaScript が読み込み終わるまで、次の JavaScript の読み込みが待ちになっている様子が分かりますね。
読み込んでいる JavaScript ファイルが少ないのは、並列読み込み用に使った Yahoo! UI Library の Get Utilityを、こちらでは読み込んでいないことと、自サイト内の Javascript を動的結合しているため。
# 読み込みファイル数が少ない実装前の方が、総読み込み時間が多くなっている。
続きを読む →

wp_enqueue_script のススメ

1件のフィードバック

WordPress で、外部 JavaScript を読み込むプラグインを作成する際、"wp-head" をフックして <head> 内に書き込むことは良くあると思う。
ただ、これだと jQuery やら prototype.js やらのライブラリが必要なプラグインを複数アクティブにした場合、同じライブラリを複数読み込んでしまうことになる。
しかも、それぞれのプラグインが読み込んでいるライブラリのバージョンが違うと目も当てられない。

で、そんな混乱を避けるために WordPress 2.1 から導入されたのが wp_enqueue_script() 関数などの一連の関数群と "wp_print_scripts" と言うアクションフック。
これらを使えば、JavaScript ライブラリのロードは簡単になる。
以下、使用方法を簡単に。
続きを読む →

PHP で Javascript を動的結合

30件の返信

Strategic Web Design ： ITpro の連載記事「技術者視点のユーザビリティ考」の第30回　JavaScriptの動作を軽くするための工夫で紹介されていた動的に js ファイルを統合する仕組み Supercharged Javascript が、中々興味深い。
要は指定された js ファイルへのアクセスを PHP に送り、結合して送り返すのだが、これが中々良さそうだ。
多少、修正して当サイトにも実装してみたので、自分用にメモ。
時間が有るときに WordPress 用のプラグインとして利用できるようにしてリリースするかも。

続きを読む →

jQuery で WordPress のコメント投稿を Ajax 化

10件の返信

AJAX Commentsプラグインを使用して、コメント POST を Ajax 化していたのだが、最新バージョンの 2.09 では有料になったようだ。
そんなわけで jQuery で、同等のことができるようなコードを書いてみた。
現在、このサイトではこの機能は有効になっていないので、コメント欄でテストしないでください。

基にしたコードは、以前 AJAX Comments プラグインを jQuery 対応させたときに書いたもの。
AJAX Comments プラグインでは、コメント POST 先を独自の PHP にしているが、今回のコードは WordPress の標準のまま wp-comments-post.php に対して POST している。

続きを読む →

jQuery.lightpop.js

229件の返信

画像だけでなく、各種動画ファイル、YouTubeなどの動画サイト、自サイト内の別ページを lightbox 風に表示するための jQuery用プラグインです。
コンテンツを表示する際のフレームを通常の白枠ではなく、画像を使用したフレームに変更することもできます。
フリーの FLV プレイヤー JW FLV Player を入手することで FLV 形式のファイルを扱えるようになります。

デモは以下のリンクからどうぞ。
jQuery.lightpop.js サンプル

ダウンロード

jQuery.lightpop plugin
続きを読む →

jQuery.lightBox を画像ファイル以外にも対応させる

15件の返信

サムネイル画像の拡大表示をすることのできる jQuery プラグイン jQuery lightBox plugin を画像ファイル以外にも対応させてみたので、自分用にメモ。

YouTube 対応させたデモは、こんな感じ。
オヤジの心に灯った小さな火 – 里田まい with 藤岡藤巻
息子よ – 藤岡藤巻

動画ファイルのデモは、こんな感じ。
海空中ワイドスターマイン
ツバメ子育て

追記:2007/12/22
jQuery.lightpop.js として、この改造と同等のことができる jQuery 用プラグインを公開しました。
デモはこちら

また、あわせて WordPress で、簡単にこのスクリプトを利用できるようにする WordPress 用プラグイン WP-lightpop も公開しています。
そちらもどうぞ。

各種 CSS / XPath セレクタのベンチマーク

コメントを残す

さて、やっつけ仕事でJavaScript-XPath を jQuery で使えるようにしてみたのだが、コレをどんなときに使おうか？と思い、とりあえずベンチマークを取ってみることにした。

使ったツールは SlickSpeed Selectors Test。
Prototype, jQuery, mootools, Ext JS, js of K, cssQuery, findCSS 等の JavaScript framework それぞれとの比較テストを行う。
他の framework との比較のため、CSS セレクタを XPath式に変換して JavaScript-XPath に渡しているが、これは Piro さんが公開している selector.js を利用している。

続きを読む →

JavaScript-XPath を jQuery で

コメントを残す

id:amachang がリリースした JavaScript-XPath が、かなり良さげ。
JavaScript-XPath の検索結果を jQuery オブジェクトにして、利用できると便利そうなので、以下のようなコードを書いてみた。



(function(jQuery){

 jQuery.xpath = function(selector, context){

  context = context || jQuery(document);

  var r, res=[];

  context.each(function() {

   r = document.evaluate(selector, this, null, 7, null);

   for(var node_no=0; node_no続きを読む →

					

		
		
	


	

				

			
						

				jQuery でスライドしつつ隠れるサイドバー
			

										

					1件のフィードバック 				

					


				

			
jQuery で右にスライドしながら隠れるサイドバーを実装。

元ネタはこちら。

jQuery の強力なエフェクト機能を使えば、こんなのも簡単にプログラミングできちゃいます。


 続きを読む →

					

		
		
	


	

				

			
						

				jQuery のプラグインでサムネイル画像の拡大表示
			

										

					コメントを残す				

					


				

			
サムネイル画像の拡大表示をする javascript ライブラリといえば、Lightbox 2 が有名ですが、これも Prototype.js + Script.aculo.us ベースです。

サイトを jQuery に移行する際には、こちらもネックになってきますね。

# 私は Lightbox JS Ver.1 を使ってたんで、問題なかったんですが 😛


で、jQuery ベースで同様に動作するものは無いか探していて、以下の2つを見つけたのでご紹介。



 続きを読む →