本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回はWebページのスクロールに応じて画像を遅延読込させるLazy Loadプラグインを用いて、多数の画像を含むWebページで効率よく画像を読み込む方法を紹介します。 はじめに 一般に画像を含むWebページをWebブラウザで表示する場合、画像が表示されるかどうかに関わらず、すべての画像がWebサーバーからダウンロードされます。そのため、縦に長いWebページに多数の画像が配置されている場合、スクロールしなければ表示されない多くの画像を読み込むために多くのロード時間を費やすことになります。この事象は特に、端末の処理能力が相対的に低く、ネットワーク状況も不安定になりがちなスマートフォンにおいて、より深刻な問題です。 そこで本記事では、Lazy Loadプラグインを用いて画
大きな画像を表示する際、何も処理をしないとすべての画像が表示されるまで、時間がかかります。 そこで役立つのが画像を読み込むタイミングを遅らせることですが、自分でゼロからスクリプトを組むとなるとなかなか大変ですが、 簡単にしかも！超軽量なJavaScriptライブラリの紹介です。 今回試してみたJavaScriptライブラリはJqueryにも依存せず、難しいプログラムも要らず、何よりも1KBと超軽量なので、スマートフォン向けのサイトなどでも安心して使うことが出来ます。 スクロールに応じて表示できるので、縦に長いページやランディングページなんかにも使えると思います。 個々最近のGoogleの検索アルゴリズムのアップデートで、ページの表示速度もページランクに影響すると明言しているようなので、SEOの意味でも表示ストレスのないページを作る際に活用したいJsです。 Echo.js 作者ページ GIt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く