十二章第四回 datasetこのページの最終更新日：2019年7月1日 今回はちょっと息抜きで、簡単ですが便利なdatasetを紹介します。 HTML5には独自データ属性というものがあり、簡単にいうと、要素に好きな属性をつけられるというものです。 ただ、完全に自由に属性に名前をつけていては大変なので、data-という接頭辞をつけた属性を勝手に自分で作っていいことになっています。つまり、具体的には例えばこうです。 <div data-foo="hi"> この例ではdiv要素にdata-fooという独自データ属性がつけられています。 もちろん自分で勝手に作ったので、HTML的にはこの属性には何の意味もありません。じゃあ何に使うのかというと、そう、JavaScript側から利用できるのです。JavaScriptから読む用にHTML要素に付加的な情報をつけるのが独自データ属性の主な役割となります。
本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回はWebページのスクロールに応じて画像を遅延読込させるLazy Loadプラグインを用いて、多数の画像を含むWebページで効率よく画像を読み込む方法を紹介します。 はじめに 一般に画像を含むWebページをWebブラウザで表示する場合、画像が表示されるかどうかに関わらず、すべての画像がWebサーバーからダウンロードされます。そのため、縦に長いWebページに多数の画像が配置されている場合、スクロールしなければ表示されない多くの画像を読み込むために多くのロード時間を費やすことになります。この事象は特に、端末の処理能力が相対的に低く、ネットワーク状況も不安定になりがちなスマートフォンにおいて、より深刻な問題です。 そこで本記事では、Lazy Loadプラグインを用いて画
1 以下、＼(^o^)／でVIPがお送りします :2015/04/18(土) 22:44:51.997 ID:dtMjKwGZ0.net 2 以下、＼(^o^)／でVIPがお送りします :2015/04/18(土) 22:45:47.503 ID:P7ypsqk50.net へぇ 3 以下、＼(^o^)／でVIPがお送りします :2015/04/18(土) 22:46:21.001 ID:k2kNVn/k0.net わかるけど話を広げにくいからあまり伸びなさそうなのが残念 6 以下、＼(^o^)／でVIPがお送りします :2015/04/18(土) 22:47:25.401 ID:ujs571s00.net どんな 7 以下、＼(^o^)／でVIPがお送りします :2015/04/18(土) 22:47:37.066 ID:oGlS4wUJp.net オーバーフローとか？ 8 以下、＼(^
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
