タグ

JavaScriptとtipsに関するArthur7のブックマーク (7)

  • ウノウラボ Unoh Labs: 画像の遅延読み込み

    yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の

  • prototype.jsを10KBにする方法

    2006-11-20T14:20:42+09:00 追記 「何者か」に攻撃を受けて、このページの内容が差し変わっていました。あわててバックアップファイルから復旧しました(「何者か」 = 酒……)。 prototype.jsを10KBにする方法の続き(.htaccessをスマートに使う) : 亜細亜ノ蛾 に続きを書きました。合わせてどうぞ。 JavaScript ファイルを圧縮する 正真正銘、Prototype(“prototype-1.4.0.js”)を10キロバイト(10,453 bytes)に圧縮して、しかも(当たり前ながら)動作するようにする方法です。 ──と聞いて真っ先に思い浮かぶのが「各種JavaScriptファイル圧縮サービス」、という人も多いでしょう。 しかし、自分が試してみたところ、例えば/packer/で圧縮したJavaScriptファイルは上手く動作しませんでした(他は

    prototype.jsを10KBにする方法
  • Kazuho@Cybozu Labs: JavaScript の文字列定数でエスケープが必要な文字

    IE、 Firefox、 Safari ともに ECMAScript の仕様を満たしていません。IE6 は ECMAScript の仕様に対して上位互換だと言えるでしょうから、実質的に問題を抱えているのは Firefox のみ、ということになるのでしょうか。JSON を使う際には、注意が必要、と。 Firefox に関して言えば、 (Control Character があるとエラーになるのではなく読み落とすという性質からして) 仕様ではなくバグだと考えるのが妥当なのかなと思いました。 参考: テストコード 10:28 追記: NUL 文字について表に含めるのを忘れていたので追加しました 10:48 追記: Safari を追加 2009/02/17 追記: Firefox のバグは 2008 年 8 月に修正されたようです (ChangeLog の3.147)

  • Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

    文書の URI の後に #foo などの識別子(id)をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |

  • いやなブログ - 文字列操作の比較表: Ruby, Python, JavaScript, P...

    文字列操作の比較表: Ruby, Python, JavaScript, Perl, C++ Ruby, Python, JavaScript, Perl, C++ の文字列操作の比較表を作りました。配列操作の比較表の続編です。間違いなどがあったらご指摘いただけると助かります。 Ruby (String) Python (str) JavaScript (String) Perl C++ (std::string)

  • Collection & Copy - IE、テキストエリア内の選択範囲/キャレットの位置(文字数)を取得する

    JavaScript簡単なようで、とても難しく、情報もあまり見つからなかったので、知らない方はぜひ読んで。 選択範囲の移動でもなく、選択範囲の内容の取得でもありません。選択範囲がテキストエリアの中で何文字目から何文字目に渡っているかをIEで調べる方法です。 まずFirefoxではElement#selectionStart/selectionEndで簡単に取れます。 次に、テキストエリアではなく一行のインプットボックスならば以下で大丈夫です。 setEndPointメソッドは、rangeTo.setEndPoint('EndToStart', rangeFrom)のように使い、rangeFromの範囲をrangeToにコピーします。名前はEndPointですが、始点/終点のどちらの端もこのメソッド一つで動かすことができます。'EndToStart'は、「rangeToの終点を、rangeF

  • Flashなしでもここまで作れる!:ITpro

    Webプログラミングは,プロはもちろんアマチュアのプログラマの間でも,もはや欠かせない開発ジャンルの一つです。しかし,書籍や雑誌の解説記事のほとんどが,データベースがどうとか,サーバーサイドがどうとか,どうしてもディープな方向に進んでしまう傾向にあります。もちろん,それはそれで大切なことなんですが,いったい何割の人が,その技術を“自分の”ホームページに使っているでしょう。 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば,動く,鳴る,つながると,いいこと尽くめです。でも,いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては,皆がみな使えるわけではありません。 Part1でも解説があったようにblog(ブログ)の認知度が上がり,利用率も増えて,プロバイダからの提供体制も整ってきて

    Flashなしでもここまで作れる!:ITpro
  • 1