カテゴリー : JavaScript

[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 を使うかを決めるとよさそうですね。


参考情報

[JavaScript] Date.now と new Date().getTime() と +new Date のパフォーマンス比較

JavaScript の Date.now と new Date().getTime() と +new Date の実行時間を jsPerf で確認してみました。

date-now-vs-new-date-gettime

結果は Date.now が最速でした。

Date.now を使いましょう!

[Handlebars.js] registerHelper で独自のヘルパーメソッドを登録する

Handlebars.js は registerHelper を使って、独自のヘルパーメソッドを登録することができます。

例えば、テンプレートで encodeURIComponent メソッドを使いたいときは、

Handlebars.registerHelper('encodeURIComponent', encodeURIComponent);

という風にヘルパーを登録して、

<p>{{encodeURIComponent 'http://tryhandlebarsjs.com/'}}</p>

とテンプレートに書けば、

<p>http%3A%2F%2Ftryhandlebarsjs.com%2F</p>

というような HTML が出力されます。

ヘルパーが不要になったら、

Handlebars.unregisterHelper('encodeURIComponent');

で割り当て解除できます。


参考情報

[Moment Timezone] moment.tz の使い方

Moment Timezone の moment.tz メソッドの使い方を紹介します。

moment.tz には 2 つのインターフェースが用意されていて公式ドキュメントに明記されているので、それを元に説明していきます。

There are two interfaces for using timezones with Moment.js.

moment.tz(…, String) is used to create a moment with a timezone, and moment().tz(String) is used to change the timezone on an existing moment.

直訳すると下記のような感じでしょうか。

Moment.js で timezone を使うために、

  • moment.tz(…, String) は moment instance を timezone 付きで作成する
  • moment().tz(String) は既存の moment instance の timezone を変換する

という 2 つインターフェースが用意されています。

moment.tz(…, String) の使用例

var a = moment.tz('2015-01-01 00:00:00', "America/Los_Angeles");
a.format();
// '2015-01-01T00:00:00-08:00'
 
a.utc().format();
// '2015-01-01T08:00:00+00:00'

moment().tz(String) の使用例

var b = moment.utc('2015-01-01 00:00:00').tz("America/Los_Angeles");
b.format();
// '2014-12-31T16:00:00-08:00'
 
b.utc().format();
// '2015-01-01T00:00:00+00:00'

よく理解して使わないと期待していたのと違う挙動になっているかもしれないので、よく理解して moment.tz を使うようにしましょう。

[JavaScript] Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

ローカル環境でローカルにある JSON ファイルを $.getJSON しようとすると Chrome では file スキーマは読み込んでくれなくてエラーが発生します。

var jsonFilePath = "./json/sample.json";
 
$.getJSON(jsonFilePath, function(data){
  // do something
});

エラーメッセージ

XMLHttpRequest cannot load file:///Users/bakorer/Downloads/hoge.json.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.

ステージングサーバに設置して http 経由で確認するしかなさそうです。

簡単に確認する方法だと DropBox の Public ディレクトリに設置して、https://dl.dropboxusercontent.com/u/xxx/index.html とかいう URL でアクセスすることで確認できます。


参考情報