Home > 技術 > JavaScript遅延ロード - jLazyLoader

JavaScript遅延ロード - jLazyLoader

2010-01-07 (木)
技術

Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック - TechTalkManiacsを読んでて、こんな方法があるのか〜と関心した。
scriptタグの中をコメントアウトにしているので、初めのJavaScriptが解析されるときは無視されて、あとでevalさせるという面白い方法。

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8" id="lazy1">
	/*
	// Make sure you strip out (or replace) comment blocks in your JavaScript first.
	window.lazy = function() {
		alert("lazy!!");
	}
	*/
	</script>
	<script type="text/javascript" charset="utf-8" id="lazy2">
	/*
	lazy();
	*/
	</script>
	<script type="text/javascript" charset="utf-8">
	// jLazyLoader
	// 後からJavaScriptをロードするためのjQueryPlugin
	(function($) {
		$.jLazyLoader = function() {}
		$.jLazyLoader.load = function(selector) {
			load(selector);
		}

function load(selector) {
		    eval(stripOutCommentBlock($(selector).html()));
		}

// [via] http://d.hatena.ne.jp/kagigotonet/20091221/1261355472
		function stripOutCommentBlock(code) {
		    return code.replace(/^[\s\xA0]+\/\*|\*\/[\s\xA0]+$/g, "")
		}
	})(jQuery);

// DCL
	$(function() {
		$("#lazyLoader").click(function() {
			$.jLazyLoader.load("#lazy1");
			$.jLazyLoader.load("#lazy2");
		});
	});
	</script>
</head>
<body>

</body>
</html>

ダウンロード

gist: 270994 - GitHub

コメントアウトにしちゃっているので可読性は低いですが、このテクニックはいつか使って速度の検証をしてみたいところ。

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1236
Listed below are links to weblogs that reference: JavaScript遅延ロード - jLazyLoader from HouseTect, JavaScript Blog

Home > 技術 > JavaScript遅延ロード - jLazyLoader

RSS Feeds

Search

Recent Entries

このブログについて

author：hisasann.com

description：就職しました！
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！

他に運営しているブログ：

利用しているWebサービス :

Tag cloud

カテゴリー

月別アーカイブ

jQuery Meetup

Visit jQuery Meetups

Page Top