JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
ProtoFlow - Coverflow-like javascript library
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff! Well mainly because I felt like it. There are few other coverflow implementations out there but I couldn't find any that used Prototype and Scriptaculous! Its fairly easy to use this lib. Just follow the steps: Add Protot
yuga.js 0.4.2 - 優雅なWeb制作のためのJS｜CSS HappyLife
通常のロールオーバー 動作テスト サンプルのソース <p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p> 説明 img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える [New]グループ化されたロールオーバー 動作テスト テキスト。 サンプルのソース <p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p> 説明 img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。 現在のページ
MacのDock風メニューを縦方向にも設置できる「MacStyleDockPlus.js」 | Creazy!
コリスさんで以下のスクリプトが紹介されていました。 MacStyleDock.jsは、Mac OS X風のドックをPrototypeやjQueryなどのライブラリを必要とせず実装できる、わずか3KBのスクリプトです。 via: [JS]Mac OS X風のドックを実装するスクリプト -MacStyleDock.js | コリス Dock風メニューを実現するJSライブラリは今までにも存在していたんだけど、他のライブラリの依存がなくて軽量ってとこに引かれて試してみました。でも、自分がDockを左サイドに縦方向で表示しているのにこのスクリプトではそれができないのが悲しくて…。 それで昨晩、ついカッとなって縦方向にも表示できるようにハックしてみたので公開します。 ・Mac-style Dock (Plus) Demonstration Downloadとちょっとだけ解説は続きを読むで。 Downl
tenjin.web: workshop/firebug
Firebugワークショップ HTML CSS ネットワーク コマンドライン / DOM コンソール / エラー / デバッグ tenjin.web (at Lingr) ワークショップ補助のチャットルームに参加してください。 0. Firebugとは / インストール Firebug 使ってみる Firebug拡張をインストールし基本的な動作をみてみましょう。 [Disable]/[Enable]で有効/無効を切り替えられます。(Firebugは、ページ内の多くの情報を監視しているため、通常の閲覧で使用していると、Firefoxがとても遅くなってしまいます。普段はFirebugを[Disable]にして、開発中のサイトのみ[Allowed Sites]に設定して利用するといいでしょう。) また、FirebugをFirefoxから切り離し、別ウィンドウに分離して表示してみましょう。 1.
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)
This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6. Features unobtrusive script, simple to setup works now also with CSS-Backgrounds (but scaling backgrounds) works with PNG-Images within Links TITLE, ALT, CLASS and STYLE-Attributes are considered This page uses jQuery Version Version 1.1, 2007-09-11 Tested on Windows XP SP2 with - IE 5.5 + 6 + 7 E x
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
[JS]Flashなどを簡単に設置するスクリプト(代替表示付) -jMedia
jMediaは、FlashやQuickTimeなどのプラグインを必要とするファイルを簡単に設置することができるjQueryのプラグインです。 jQueryのプラグインは、下記ページでもエントリーしています。 jQueryのプラグイン33+1選 jMedia jMediaは、単にプラグインファイルの設置だけではなく、IEのActiveXへの対応やプラグインの探知機能も備えています。 また、設置には下記の3つのモードが利用できます。 プラグインが無い場合、代替コンテンツを表示するモード。 [demo] クリックして、はじめてプラグインコンテンツを表示するモード。 [demo] 印刷時に、印刷用の代替コンテンツを表示するモード。 [demo] jMediaで設置可能なファイル Flash (.swf) QuickTime (.mov) Real Media (.ram, .rm) Windows
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
Docs | Sencha Documentation
Introduction The documentation for the ExtReact product diverges somewhat from the documentation of other Sencha products. The sections below describe documentation for all products except where indicated as unique to ExtReact. Terms, Icons, and Labels Many classes have shortcut names used when creating (instantiating) a class with a configuration object. The shortcut name is referred to as an ali
prototype.js で element にメソッドを追加する方法
prototype.js で element にメソッドを追加する方法 2007-07-06-1: [JavaScript] prototype.js 1.5 から $ メソッドが改良されて $('foo').show(); のように書けるようになりました． prototype.js のソースを読んでいくと Element.Methods に好きなメソッドを追加できそうなのでやってみました． Element.Methods.warning = function(element) { $(element).style.color = '#f00'; return element; }; Element.addMethods(); // addMethods しないと追加されない！ 上記は，指定された element を赤色にして警告するものです (いい例が思いつかない……)． 以下のようにし
超便利！JavaScript用の文字列拡張関数いろいろ:phpspot開発日誌
Ivan Uzunov Blog Blog Archive Top 10 JavaScript String.prototype Extensions This is the list of mine top 10 JavaScript String.prototype extensions. If you want to you can post yours bellow. 超便利！JavaScript用の文字列拡張関数いろいろ String.prototype でStringクラスを拡張し、次のような機能を実装するための関数が公開されています。 trim - トリミングを行う関数 splitrim - トリミングとsplitを行う関数 escHtml - HTMLエスケープを行う関数 unescHtml - HTMLアンエスケープを行う関数 urlEncode - URLエンコードを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ProtoFlow first preview release… :: Deensoft
[JS]スタイルシートを機能拡張するスクリプト -MoreCSS
ちょっと便利なCSS Tips いろいろ - DesignWalker
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
Deziner Folio» Blog Archive » df Javascript Smooth Scroll
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos