Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。

in-view.jsの使い方

例えば表示されたタイミングでは次のように指定します。

inView('.someSelector').on('enter', doSomething);

逆に消えた時には次のようにします。

inView('.someSelector').on('exit', doSomething);

ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。

inView('.someSelector').once('enter', doSomething);

オフセットを指定できますので、実際にイベントを実行するタイミングを細かく指定できます。表示される少し前に読み込めばユーザストレスは少ないでしょう。上下だけでなく、左右も指定できます。

inView.offset({
    top: 100,
    right: 75,
    bottom: 50,
    left: 25
});

デモを実行している様子。スクロールすると赤と青の玉が入れ替わります。オフセットが大きめのようです。

in-view.jsはIE9以降で使えますので、幅広いブラウザをサポートしています。うまく使えばサーバ側の負荷も下げられるでしょう（Ajaxをコールする部分など）し、ユーザビリティも高められそうです。

in-view.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

in-view.js - Get notified when a DOM element enters or exits the viewport. camwiegert/in-view: Get notified when a DOM element enters or exits the viewport.