bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptプログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」JavaScript2016.09.19プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリです。このライブラリはとても軽量です。具体的には、プログレッシブ形式を使用して画像を表示します。プログレッシブ形式とは、画像の解像度を低く表示して、徐々に高解像度(細かい画像)で表示する方式のことです。対比するのが、ベースライン形式での表示で、元の画像を徐々に読み込む方式です。こちらの方が一般的ですが、容量の重い画像ですと、画像の表示まで時間がかかる場合があります。それを解決してくれるのがPilpilということです!詳しく見ていきましょう。PilpilPilpilの実際のデモは以下になります。デモPilpilの具体的な挙動ですが、ページ読み込みの際、画像にぼかし効果が使用され、すべての読み込みが完了すると本来の画像が表示されるというものです。画像サイズがMB級のものを表示させたい場合や、多くの画像を表示させることでサイト自体が重たくなってしまう場合などに効果的なJSライブラリです。どこに画像が表示されるのかが、あらかじめユーザーにも分かりやすく伝わり、ユーザーに優しい設計がされたサイトに近づけます。画像の読み込みに時間がかかると、「もういいや」とページを離脱する可能性も高くなります。そんな時には、このPilpilを活用しましょう。ダウンロードしたPilpilのファイルにある、「pilpil.css」と「pilpil.js」を必ず読み込んでください。構造はいたってシンプルです。最初に小さいもの(低解像度)が、最終的に本来の画像(高解像度)が表示されるといったイメージです。実装方法もとても簡単です。class]でまとめます。具体的な読み込み形式は、プラグインサイトで丁寧に記載されています。これだけで基本的な作業は終わりです。あとは、Pilpilにすべておまかせです。これでユーザーのストレスは解消ですね。Pilpilのダウンロードや詳しい使い方は以下からどうぞ。toは商品をカートに入れた際にカートまで飛んでいくエフェクトを...JavaScriptスクロール中にナビメニューを上部に表示できるjQueryプラグイン「stickyNavbar.js」...stickyNavbar.jsというjQueryプラグインを使えば、ス...JavaScript色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」DarkTooltipというjQueryプラグインを使えば、色んなパタ...JavaScriptiOSの画面切り替えのようなスライドができるJavaScript「Kontext」KontextというJavaScriptを使えばiOSの画面切り替えの...JavaScriptカスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。