カテゴリー : jQuery

[jQuery] カルーセルライブラリ slick.js の lazyLoad オプションを理解する

jQuery のカルーセルライブラリ slick.js をそのまま使うと slick.js file の読み込みと .slick() method の実行が完了するまで、カルーセルのレイアウトにならず ul/li タグで囲んでいる画像が全て表示されてしまうという問題に直面しました。

これを解決するには 1 枚目の画像だけ src で画像 URL を指定します。

<img src="http://example.com/image1.png">

2 枚目以降は data-lazy attribute に image url を指定します。

<img data-lazy="http://example.com/image2.png">

そして .slick() method に lazyLoad オプションを設定してあげれば OK です。

$('#js-banner-area').slick({
  lazyLoad: 'progressive'
});

Lazy Loading のサンプルは slick – the last carousel you'll ever need に載っています。

ちなみに lazyLoad オプションは ondemand と progressive の 2 つの設定があります。挙動の違いは Stack Overflow に詳しく説明されている投稿があったので引用しておきます。

ondemand: Loads the visible image as soon as the page is displayed and the other ones only when they’re displayed. (“[…] loads slides on demand. When a slide becomes visible (or on the before slide callback) the load is fired.”) Should be used if the other images of the carousel are displayed very rarely.

progressive: Loads the visible image as soon as the page is displayed and the other ones after everything else is loaded in the background (“loads the visible slides on init, and then progressively loads the rest of the slides on window.load().”). Should be used if the other images will be used most (or all) of the times the page is displayed.

デフォルトは画像が表示されるタイミングで load 処理が動く ondemand ですが、個人的には background で画像を load しておいてくれる progressive オプションを使うのが好みです。

lazyLoad オプションに設定値はカルーセルで 2 枚目以降の画像が表示される頻度で ondemand を使うか progressive を使うかを決めるとよさそうですね。

参考情報

[jQuery] .data() で整数が丸められることがあるので .attr() で取得する

jQuery の .data() メソッドで整数の桁数が多いと丸められることがあるので .attr() で取得すべきということを知りました。

jQuery 1.7.2 の場合

<!-- HTML -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="/xxx" data-id="123456789012345678901234567890" id='link'>Click</a>
> //JavaScript
$('#link').data('id')
1.2345678901234568e+29
 
$('#link').attr('data-id')
"123456789012345678901234567890"

jQuery 1.11.1 の場合

<!-- HTML -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/xxx" data-id="123456789012345678901234567890" id='link'>Click</a>
> //JavaScript
$('#link').data('id')
"123456789012345678901234567890"
 
$('#link').attr('data-id')
"123456789012345678901234567890"

以上です。


参考情報

jQuery.data() | jQuery API Documentation

.attr() | jQuery API Documentation

javascript – Issue with jQuery data() treating string as number – Stack Overflow

意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…

jQuery Countdown で日数だけ表示させるスニペット

jQuery Countdown で日数だけ表示させるスニペットをご紹介します。

var countDownEndDate = new Date('2015-01-01T00:00:00+0900');
 
$('#js-countdown').countdown({
  until: countDownEndDate,
  compact: true,
  compactLabels: ['', '', '', ''],
  format: 'D'
});

これで、カウントダウンする日数の部分だけ表示されます。


参考情報

jQuery Countdown

jQuery Countdown Reference

jQuery Countdownの時刻表示形式を変更する

jQuery Countdown の時刻表示形式を変更するスニペットをメモ。

例えば、10 Days : 20 Hours : 30 Minutes : 40 Seconds という表示形式にしたい場合は、下記のように書きます。

$(selector).countdown({
  separator_days: ': ',
  separator: ': ',
  label_dd: ' Days ',
  label_hh: ' Hours ',
  label_mm: ' Minutes ',
  label_ss: ' Seconds '
});

参考情報

kemar/jquery.countdown

[jQuery] $.ajax GET をキャッシュさせない設定方法

jQuery で Ajax GET をキャッシュさせない設定方法をご紹介します。

IE はデフォルトで ajax GET は cahce : true らしく、2回目以降サーバーへリクエストを送りません。

なので、明示的に cache : false してあげるといいです。

$.ajax({
  type: 'GET',
  dataType: 'json',
  url : "http://example.com/",
  cache : false,
  ...
});

また、常にキャッシュを無効にする方法もあります。

$.ajaxSetup で cache : false を設定するコードをJavaScriptの共通処理に加えておけば、ajax GET はデフォルトで cache : false で処理してくれます。

$(function() {
  $.ajaxSetup({
    cache: false
  });
});

IE11 で ajax GET の結果がキャッシュされてて正常に動かなくて苦しみました・・・

参考情報

[jQuery] slideDown() のアニメーションが動かないときの解決方法

jQuery の slideDown() のアニメーションが動かないときの解決方法をご紹介します。

普通に使う分には問題ないのですが、divを入れ子にしたような構造で使う場合に slideDown() を呼び出してもアニメーションが動かず、show() を呼んだときのようなパッと表示されてしまいました。

以下に、アニメーションが動かなかったときのHTMLと、解決したJavaScriptのコードを記載します。

.show().slideDown() のメソッドチェーンで解決する

// 一旦、内部elementを非表示にする
$('#content-inner').hide();
 
// 外側のelementを表示してから slideDown()
$('#content-outer').show().slideDown();
 
// 最後に、内部のelementにも slideDown()
$('#content-inner').slideDown();

slideUp() は普通に使うだけ

$('#content-outer').slideUp();
$('#content-inner').slideUp();

参考情報

javascript – jQuery slideDown() animation not working – Stack Overflow

codeigniter – JQuery slidedown effect not working? – Stack Overflow

slideDown([speed], [callback]) – jQuery 日本語リファレンス

slideUp([speed], [callback]) – jQuery 日本語リファレンス

[jQuery] スクロール中に特定の要素を固定するプラグイン「hcSticky」

スクロール中に特定の要素を固定するjQueryプラグイン「hcSticky」が便利だったのでご紹介します。

hcSticky – jQuery Floating Sticky Plugin | Some Web Log

特定の要素に hcSticky() を呼ぶだけで、スクロール時に要素を固定してくれます。

$('#sidebar').hcSticky();

使い方がシンプルでおすすめです。

[jQuery] Minimalect で onChange イベントを発生させる

フォームのselect要素を綺麗に表示させる jQuery ライブラリ「Minimalect」で onChange イベントを発生させる方法をメモ。

$('#js-target-select').minimalect({
  onchange: function() {
    $('#js-target-select').trigger('change');
  }
});
 
$('#js-target-select').change(function(){
  // do onchange event
});

上記のように Minimalect の onchange で select の onchange を発火させればいいみたい。


参考情報

jQuery Minimalectのonchange – プログラミングメモ

[jQuery] mouseover/mouseout と mouseenter/mouseleave の違い

jQuery のイベント mouseover/mouseout, mouseenter/mouseleave の違いを知らずに、かなりハマってしまった…。

下記のサイトが分かりやすく説明してくださってました。

DOM Leve3 イベント mouseover/mouseout, mouseenter/mouseleave それぞれの違いについて – 今日もスミマセン。

mouseenter/mouseleave イベントの方が、利用用途として直感的ですね。

mouseover/mouseout は、内部のDOMを出入りするときもイベントが発火してしまうので、思わぬ挙動をしてしまって結構悩みました。

[jQuery] Minimalect で値の変更を反映させる方法

フォームのselect要素を綺麗に表示させる jQuery ライブラリ「Minimalect」で、値の変更を反映する方法をメモ。

$("#myselect").val("newvalue").change();

.val() だけでは値はセットされるが表示が変わらないので、.change() で変更したことを教えて上げる必要があるみたいです。


参考情報

Minimalect by groenroos