jQueryプラグイン活用講座

Lazy Loadのダウンロードと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインLazy Loadをダウンロードして、HTMLドキュメントに設定を加えます。
講師:
05:29

字幕

このレッスンでは画面のスクロールに応じて、画像を読み込むプラグイン Lazy Load の設定とダウンロードについて御説明をします。これが Lazy Load の情報のページなんですけれどもURL はここです。あるいは Google で検索しても良いでしょう。jquery と言うキーワードと共にLazy load と言う検索をすれば一番トップにLazy LoadPlugin for jQuery言うページが載っています。ここが今のプロジェクトのページです。ここには Lazy Load の簡単な使い方の説明が英語ですけれども載っています。どういう風に使うんでしょうか、とか。セッティングですね。オプションの設定などが載っていてサンプルのコードも掲載されていますのでこれを見て試す事が出来ます。唯一、重大な注意があるんですがダウンロードのリンクが見つかりません。以前はあったはずなんですけれどもどうもダウンロードのリンクがなくなってしまった様です。どこからダウンロードするかと言うとGitHub にこの作者Tuupola さんという風に読むんでしょうか。この方の GitHub のページがありますのでそこからダウンロードする事になります。GitHub の URL がこちらです。 github.com の今の作者Tuupola さんですね。そして jquery_lazyloadここはスペースも何も入りません。lazyload 一単語です。Github のページを開きました。そしてこのライブラリーをダウンロードする時には右下の方にあるDownload ZIP ですね。このボタンで ZIP がダウンロードされます。ダウンロードしたライブラリーのZIP file を展開したのがこのフォルダーです。jquery_lazyload-masterそしてジャバスクリプトのライブラリーですね。それは jquerylazyload.jsもしくは .min.js。こちらが圧縮されている’バージョンですのでサーバーにアップロードする時はこちらを使うといいでしょう。上は?が実際にコード、中身を見たいと言う時に使います。ですから特にそういう必要がない人はこちらの .min の方をお使い下さい。このライブラリーのジャバスクリプトファイルを作業用のホルダー、こちらなんですけれどもlib というホルダーに入れておきます。そしてこのサンプル .htmlこれが作業用のHTMLドキュメントです。後 HTML でファイルがいくつかあるんですがこれはデモのファイルになっています。 ただローカルで試すと画像の読み込みがとても早いので先ほどのプロジェクトのページにこの同じデモが、リンクがありますのでそちらで確かめる方が良いでしょう。サンプルを1つだけ確かめておきましょうか。このページの上の方にある、この辺り幾つもあるんですけれども、このリンクがサンプルです。一番先頭の basic options一番基本的な物ですね。これを見てみましょう。最もサーバーでも最近の環境ではロードは早いのでちょっと、よく分からないかもしれません。クリックします。そしてスクロールしていくとビデオでは分かりにくいかもしれませんね。一瞬消えてるんですがすぐに画像が出てきます。もっとたくさん画像がある時に使うと良いでしょう。特に全ての画像をユーザー 閲覧者が見るわけではない、と言う場合に全部をロードしてしまうとサーバーに負荷が掛かります。ですから見た分だけ見る分だけロードする。写真をたくさん使ったサイトでその様な場合にはこの Lazy Load を是非ご利用頂くと良いと思います。作業用、練習用 のsample.html ファイルをドリームウィーバー で開きました。jquery のプラグインですから当然jqueryを読み込んでおく必要があります。 この script 要素ではjquery を httpからスタートしていますのでネットワーク、ネットからライブラリーを読み込んでくると言う形にしています。いわゆる cdn と言う読み込み方ですね。次に、今ダウンロードしておいたライブラリー Lazy Load をスクリプト要素でsrc " " の設定をして参照をクリックして先ほど lib のフォルダーに「コピー」しておいたjquery.lazyload.min.jsmin の方ですね。これを開きます。そして を閉じて「ファイル」を「保存」します。これで Lazy Load を使う準備が整いました。Lazy Load のLazy と言うのは怠けた と言う様な事なんですけれどもロードの手を抜くって言う事ですね。下の方にあって表示しないものはロードしないと言う事で、サーバーの負荷を減らすと言う事なんですがこのレッスンではそのプラグイン Lazy Load のダウンロードと設定について御説明しました。ダウンロードについては特にリンクがないのでご注意下さい。設定はダウンロードしたジャバスクリプトファイルを然るべき「フォルダー」に入れてそれを script 要素で読み込めば結構です。

jQueryプラグイン活用講座

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

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

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

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

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