カテゴリー : 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 Ajax ajaxSetup() Method

ajax – Stop jQuery .load response from being cached – Stack Overflow

jQuery.ajax でリクエストをキャッシュさせない方法 – 葉っぱ日記