jQueryプラグイン活用講座

Lazy Loadのオプションで画像をフェードインする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションのプロパティにより画像をフェードインで表示します。
講師:
04:13

字幕

このレッスンでは画面のスクロールに応じて画像を読みこむプラグイン lazyload のオプションを使って画像の表示をフェードインさせてみたいと思います今開いている HTML ドキュメントsample.html なんですがlazyload の最低限の処理を書いてありますスクリプトはここですねスタイルシートはちょっとたたんでおきますjQuery でドキュメントが読み込まれたとき実行しますセレクタとしては img の要素に対してすべて共通に lazy というclass が設定してあるのでそれを指定して呼び出しは lazyload というプラグインの名前そのままです() の中には何もありませんオプションは () の中に指定しますこの最低限の記述でlazyload は動きますでは いったん確認してみましょう「ファイル」メニューから「ブラウザーでプレビュー」しますスクロールしてみますけれども画像の件数が少ないですしそれほど大きい画像ではないので読み込みの遅れはちょっとなかなか表示が確認できませんねでも一応動いていますそれに これにオプションでフェードインを加えればちゃんと動いていることが分かりますlazyload のメソッドに渡すオプションの指定はオブジェクトですのでオブジェクトを作っておきます変数を入れます変数は settings としましょうそしてオブジェクトですのでということで改行をして オプションを複数入れるときに見やすいようにしておきますフェードインは effect ですそして文字列でfadeIn I が大文字ですとりあえずこの1つだけこの settings をlazyload の引数としてコピーを持っていきますそうしたら保存をして確認してみましょうキャッシュはクリアしてありますのでこのままブラウザをリロードしますフェードインしますからちょっとは確認がしやすいと思いますリロードしますフェードインですね画面が切り替わるたびにフェードインしてることがこれなら何とかわかるでしょうもう少し分かりやすいようにフィードインの時間を延ばしましょうこれもオプションとしてこのオブジェクトの中に加えますsettings ですねオブジェクトですから , 区切りでプロパティを加えるんですがeffect_ ですspeed そして単位はミリ秒ですから1000 秒で1秒です少し長めに3秒3000 としておきましょうこれで保存しますキャッシュはクリアしましたこの手のロード系のスクリプトを確かめるときには必ずブラウザでキャッシュをクリアして確かめないと結果がおかしくなるということがよくありますのでご注意くださいではリロードします先ほどよりフェードインの時間がかかりますねこれでしたらちゃんとlazyload が動いているということが確認いただけるかと思いますこれが最後の画像ですこのレッスンではlazyload のオプションを使って読み込んだ画像をフェードインで表示するという設定にしてみましたオプションは lazyload のメソッドにオブジェクトで渡しますこれ(settings)がそのオブジェクトでプロパティとして effect で文字列 fadeIn と指定するとフェードインになりますそれからもう1つその場合にはeffect_speed ということで数値 1000 ミリ秒が1秒ということで指定をするとフェードインの時間を変えることができました

jQueryプラグイン活用講座

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

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

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

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

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