jQueryプラグイン活用講座

簡単なスクリプトでスクロールに応じて画像を読み込む

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なスクリプトで、画面のスクロールに応じて画像を読み込みます。
講師:
06:37

字幕

このレッスンでは画面のスクロールに応じて画像を順次読み込んでいく、プラグインLazy Load を簡単なコードでまずは使ってみたいと思います。今、開いているsample.html。これが練習用のHTML ドキュメントなんですけれどもLazy Load のライブラリー、プラグインですね。jquery.lazyload.min.jsの読み込みはscript 要素で行っていますけれどもまだコードは何も書いてありません。画像を順番に読み込んでくると言う事ですから画像とテキストくらい必要なのでそれはあらかじめ打ち込んであります。これが画像ですねimg そして、テキストテキストは一応量がないとページの長さが保てないので量を入れてありますがここはそれほど重要ではありません。そして img 要素なんですがclass として lazy と言う名前が、全て共通で設定してあります。イメージは全部で5点あるんですけれどもphoto 01 からphoto 05 までですね。全て lazy と言う class が定められています。stylesheet が簡単に設定してあるんですが殆ど大きさとかmargin とかにに関するものです。 そして lazy に対する指定はありません。あの lazy と言う class はLazy Load の方でジャバスクリプトコードで使います。ただ現在の状態一応確認しておきましょう。「ファイル」から「ブラウザーでプレビュー」します。テキストがあって写真があって写真は幅が 640 ピクセルくらいです。それほど大きくありませんし写真5点ですのでLazy Load の効果はちょっと出にくいかもしれませんが、練習ですのでこれくらいのサンプルでやって行きましょう。Lazy Load を使うステップは大きく2つあります。1つはジャバスクリプトコードの記述です。jquery を使いますのでドキュメントが読み込み終わったらと言うおなじみのお約束の書き方です。$ ( function ) ){ 始まり }閉じ) を閉じて ; ですね。そして } は分かり易いように改行しておきます。そして、この中にLazy Load の読み込み実行の処理が入るわけですがとても簡単です。まず、セレクター ですけれども先ほど確認した通りもう一度確認しましょうか。img には全て classとして共通に lazy と言うのがありますのでこれを規定します。 img のclass lazy ですね。そしてこれに対してどうするかと言うとlazyload。プラグインの名前そのまま( ) ;。ジャバスクリプトのコードはこれでおしまいです。ただ body 要素のimg 要素の方ですね。そこをちょっと書き換える必要があります。img 要素は通常そのパスをファイルのパスを src と言う属性で指定します。ここを Lazy Load 専用の属性に書き換えます。data-original です。original としておきます。これで全て書き換えますので「コピー」をとっておいて今度は photo 02「ペースト」photo 03「ペースト」 あと2つです。photo 04「ペースト」photo 05全てを src をdata-originalに書き換えました。これで「保存」します。そしてブラウザーをリフレッシュ再読み込みするわけなんですがこういう読み込み系のプラグイン、あるいは行動を試す時には必ずキャッシュをクリアしておくべきです。Chrome の場合にはこのメニューから 「閲覧履歴を消去」 と言うメニューになります。そしてキャッシュされた画像とファイルにチェックが入っている事を確認したら閲覧履歴データを消去します。 こうしておいて試します。リロードしますがでも画像数が少なくてとても早いのでちょっと効果が見えにくいかもしれません。リロードしたら急いでここをスクロールしますのでよくご覧下さい。リロードしました。スクロールします。ちょっと見えにくいですね。やはりこの程度の画像の点数ではなかなか分かりにくい様です。そこで私が作ったサンプルをjsdoit と言うサイトに揚げてあります。jsdo.it ですね。jsdo.itこれがサイトです。そして私のアカウントは/FumioNonaka です。頭文字は大文字になっています。で見て頂くと code と一覧が出来まして、その下の方にどんどん追加するとページが次に行ってしまうかもしれませんがこの中に Lazy Load のサンプルがあります。これはこの再生ボタンの様な物を押すと確認が出来るんですがキャッシュは残っていないはずですので試してみましょう。押してみて、出てこないですね。これで何とかお分かり頂けますでしょうか。スクロールすると、読み込みが行われると言うこれがLazy Load の動作です。このレッスンでは画面のスクロール時に応じて、画像を読み込むLazy Load と言うプラグインの簡単な code で試すと言う事をやってみました。 まず code は非常に簡単ですね。jquery のおなじみの?した時の、処理の仕方に対してセレクターはimg の class 名です。そして .lazyload でこれで実行が出来るんですが、1つ要素の方の書き換えがある事にご注意下さい。要素は src をdata-original に書き換えます。これだけで Lazy Load の実行が出来ると言う事でした。

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

2時間36分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。