jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。
主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。
jQueryの最新版をそれぞれ読み込む場合、次のようになります。
|
<!-- Google Hosted Library --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Microsoft Ajax Content Delivery Network --> <script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <!-- jsDelivr --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- cdnjs.com --> <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script> |
複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。
jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。
|
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script> |
CSSを使ってボタンのロールオーバーで画像を差し替えなどの処理の際に、画像が読み込まれていない状態では一瞬ちらつきが発生することがあります。
ロールオーバー用の画像をあらかじめ読み込むために、jQueryを使って画像をプリロードするためのメモです。
|
//プリロードする画像を配列で渡します priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]); function preloadImages(images) { $.each(images, function(index, value) { $("<img>").attr("src", value); }); } |
Drupalのテーマで、古いIE向けに条件コメント付きのJavaScriptの読み込み方法です。
テーマディレクトリ内の「template.php」ファイルにプリプロセスとして次のように記述します。
|
<?php function THEMENAME_preprocess_html(&$variables) { drupal_add_html_head(array( '#tag' => 'script', '#attributes' => array('src' => drupal_get_path('theme', 'THEMENAME').'/js/ie9.js'), '#prefix' => '<!--[if lt IE 9]>', '#suffix' => '</script><![endif]-->' ), 'ie9' ); } ?> |
実際のレンダリングでは次のようになります。
|
<!--[if lt IE 9]> <script src="sites/all/themes/THEMENAME/js/ie9.js" /></script> <![endif]--> |
ウィンドウのリサイズ時に、少し遅れて画像を移動させたりするためのタイマー処理のメモです。
「resize」の部分を「scroll」にすれば、スクロール時のタイマー処理になります。
|
var timer; var delay = 100;//遅延時間(ミリ秒) $(window).resize(function() { if (timer) { clearTimeout(timer); } timer = setTimeout(onTimer, delay); }); function onTimer() { //処理 } |
デザインをカスタマイズできる、jQueryのプラグイン「jScrollPane」でスクロールバーを簡単に設置する際のメモです。
サンプルはこちら
設置にはjQuery本体と、jScrollPaneプラグインにマウスホイール用のプラグインをあらかじめ読み込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scroll Panel</title> <link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" /> <script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="common/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="common/js/jquery.jscrollpane.min.js"></script> <script type="text/javascript"> $(function() { $("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp"); }); </script> </head> <body> <div id="content" class="scroll-pane"> <p>ここにテキストなどのコンテンツを記述します。</p> </div><!-- content --> </body> </html> |
スタイルシートは最小限のみを記述しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
|
div.jspContainer { position: relative; overflow: hidden; } div.jspPane { position: absolute; } div.jspVerticalBar { position: absolute; width: 10px; height: 100%; top: 0px; right: 0px; background-color: #e6e6e6; } div.jspVerticalBar * { margin: 0px; padding: 0px; } div.jspCap { display: none; } div.jspTrack { position: relative; } div.jspDrag { position: relative; left: 0px; top: 0px; cursor: pointer; background-color: #808080; } div.scroll-pane { width: 500px; height: 250px; overflow: auto; } |
jScrollPane