Tag Archives: javascript

ストレスを感じないサイトにするために、HTTPリクエストを少なくしたいですよね。そんなわけで、画像を遅延して読み込むjsについて調べてみました。 どうやら、画像遅延のjavascriptでは『Lazy Load』 というｊsが有名のようです。ただし、新しいブラウザでは遅延読み込むが出来ないので、やる意味がないよ的な注意書きがされていました。つまり、見栄えはスクロールすることで遅れて画像が表示されますが、実際には一気に読み込んでいます。ですので、HTTPリクエストを少なくするどころか、逆にリクエストが多くなっちゃった！！って事のようです。 そもそも何故にそんな事になるの？ それは、DOM Readyの時点で画像のリクエストは走っているので、その後src属性を空にしてもとき既に遅く、スクロールして表示したときにsrc属性をつっこんだらまたリクエストがっていう流れです。 DOM Ready とは？ DOM要素の準備が整ったらコールバックを実行させる事。つまり、HTML や XML で記述された各要素を取り扱うための標準インタフェースの準備が整ったら、LazyLoad.jsを読み込みます。（なので、ｊｓを読み込む時点ですでに、画像はリクエストされてます） という事は、DOM Ready 前にイベントを発生させる必要があるってことでしょうか？続きはまた後日・・・。

sparrow.jsの一押しは、TIPSです。classを追加するだけで反映されちゃうからとっても便利です。そんな便利なTIPSを本家のサイトから抜粋してご紹介します。設置したら下記のTIPSを試してみると面白いですよ。 導入と設定に関する記事は「sparrow.jsの導入と設定」が参考になればと思います。 ■モバイル用に設定したスタイルをスマートフォンで表示したくない場合 ▼class=”sp_del”　を使用します。 <div style=”font-size: xx-small;” class=”sp_del” > スマートフォンではここは消えてなくなります。モバイルでは表示されます。 </div> ■スマートフォンだけ文字サイズを変更したい場合 ▼下記のコードを使用します。core.jsに記述されています。 <span class=”sp_style largeFont” style=”font-size: xx-small;”> スマートフォンでは大きい文字に変わります </span> sp_styleはstyle無効のclassです。largeFont（記述通りに反映されます）が、どこで設定されているclassなのかよくわからないですね。sp_del同様にcore.jsに記述されています。 sp_config.js　に記述されている下記の○%部分を変更することで、モバイルで指定したフォントサイズをスマートフォンように変更することができます。コード内でしっかりと、xx-small等の指定がされているモバイルサイトであれば、ここを変更するだけで、文字の見え方は格段に良くなります。 FONT_MAPPING["xx-small"] = “○％”; FONT_MAPPING["x-small"] = “○％”; FONT_MAPPING["small"] = “○％”; FONT_MAPPING["medium"] = “○％”; FONT_MAPPING["large"] = “○％”; FONT_MAPPING["x-large"] = “○％”; … Continue reading →

JavaScriptのフェードインをご紹介します。 <script language=”JavaScript”> opa=0; opacnt=1; timer=15; function FadeInstr() { fade_inId = “fade_in”; MyImg = document.getElementById(fade_inId); MyImg.style.visibility = “visible”; FadeIn(fade_inId,opa); } function FadeIn(fade_inId,opa) { if (opa <= 100) { document.getElementById(fade_inId).style.filter = “alpha(opacity:”+opa+”)”; document.getElementById(fade_inId).style.opacity = opa/100; opa += opacnt; setTimeout(“FadeIn(‘”+fade_inId+”‘,”+opa+”)”, timer); } … Continue reading →

Copyrightの○○年の部分の更新作業を自動にしたい方のお役にたてればと思います。 ——————————————- javascript ——————————————- function year() { var data = new Date(); var now_year = data.getFullYear(); document.write(now_year); } ①新規javascriptファイルを作成で上記scriptを記述 ②サーバー任意の場所にアップロード ③htmlに記述（※2箇所） ～内に↓ <script language=”javascript” type=”text/javascript” src=”js/now_year.js”></script> Copyright記述部分に↓ <p>Copyright&nbsp;(C)&nbsp;2007-<script language=”javascript” type=”text/javascript”>year();</script>&nbsp;美Deブ& nbsp;All&nbsp;Rights&nbsp;Reserved.</p> とこんなカンジに記述 ④ブラウザチェックして問題なければ完了 ——————————————- php ——————————————- phpで作っていればもっと簡単で、（年）を表示したい箇所に↓を記述すれば完了です。 ※サンプル <p>Copyright&nbsp; (C)&nbsp;2007<?=date(“Y”);?>&nbsp;美Deブ&nbsp;All& … Continue reading →