ウノウラボ Unoh Labs: 画像の遅延読み込み
yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の
最速インターフェース研究会 :: 遅延評価を使ってSjaxをAjaxに変換する方法
継続を使ってSjaxをAjaxに簡単に変換する方法 http://d.hatena.ne.jp/llamerada/20070220/1171984586 を見て。こんなのはどうだろう。 ユーザーからの入力や、非同期のHTTPリクエストなんかを、具体化されてないオブジェクトとして捉えて、それらを受け取った関数側が遅延オブジェクトを具体化するためのリクエストを投げて再試行する。ネストが深くならないですむ、同期処理で書く場合との変更点が少ない、あるいは完全に差異を無くすことができる。 alert(args)のコメントを外せば、引数が具体化されていく様子が分かるはず。 Function.prototype.receive_lazy = function(){ var orig = this; return function(){ var thisObj = this; var me = argu
JavaScriptで遅延ロードをする方法についてのおさらい
先日リリースした Extractor の Bookmarklet(コメントをチェック(浮き出る版))のデザインや仕様を変えました。主な変更点としては、「マウスでドラッグできる機能」が付いたのとデザインをがらっと変えました。 その際にma.laさんの最速インターフェース研究会で紹介されていたJavaScriptでの遅延ロードのテクニックを拝借させて頂きましたので、覚え書きのつもりで今回どのようにしてそれを使ったのかについて書いておきます。 まず、先に紹介した Extractor の Bookmarklet がなにをやっているかというと、現在見ているページに script タグのエレメントを生成して、他のドメインのJavaScriptのソースを読み込んでいます。Bookmarklet を分解すると下記になっています。具体的には createElement で script タグを生成して、各プ
document.lazy_writer
特定のscript中に含まれるdocument.writeを上書きして、遅延描画にすることができます。 document.writeを使う広告配信スクリプトや、ブログパーツなどの挙動を置き換えることが出来ます。 外部サーバーから読み込むスクリプトをページ最後部に記述することでページレンダリングを妨げなくなります。 このページはこんな感じになってます。 var adsense_url = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; document.lazy_writer(adsense_url, function(str){ var id = "adsense_" + this.script_count; document.getElementById(id).innerHTML = str; }, {delay :
JavaScript でのたらいまわしいろいろ: Days on the Moon
「IT戦記 - JavaScript で遅延評価」より。遅延評価といえばたらいまわし関数と相場が決まっている、ような気がする。 function tak(x, y, z) { return (x <= y) ? y : tak(tak(x - 1, y, z), tak(y - 1, z, x), tak(z - 1, x, y)); } これを元記事に従って書き直すとこうなる。 // from http://d.hatena.ne.jp/amachang/20061204/1165180769 Function.prototype.lazy = function () { return { valueOf: this }; }; function takL(x, y, z) { return (x <= y) ? y : takL(takL(x - 1, y, z), takL(y -
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
