遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
無限スクロールの実装 | スタッフネット株式会社
Angular2による無限スクロールの実装 1.無限スクロールとは 無限スクロールは、件数の多いリスト表示に便利なユーザーインターフェースです。 例えば、Googleで検索すると、まず10件分の結果が表示され、残りは複数の画面に分割されます。画面の一番下に、下図のようなページ送りアイコンが表示されます。 求めるデータが１ページ目に無いときは、ページ送りを繰り返しています。この操作を面倒に感じませんか。ExcelやWordのように全体を高速でスクロールしたいと思いませんか。 無限スクロールを使うと、件数の多いリスト表示であっても、画面の切り替えなしに、どこまでもスクロールして表示できます。無限スクロールを体験した人で、いままでのページ送り操作に戻りたいと言う人はいません。 [参考] 無限スクロールのサンプルビデオ 操作性の向上だけでなく、大量の書類・図面・写真などの流し見をして、素早くチェッ
AngularのComponentをnpm packageとして公開する - Qiita
{ "compilerOptions": { "target": "es5", "module": "es2015", "sourceMap": true, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "declaration": true, "outDir": "dist", "lib": [ "dom", "es2015" ] }, "include": [ "src/index.ts" ], "angularCompilerOptions": { "genDir": "aot" } } ポイントは以下 module: es2015にして、トランスパイル結果でもimport/exportが利用されている状態にする declarationをtrueにし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular —Simple Infinite scroller directive with RxJS Observables
