Velo by Wix | データベース呼び出し・レイジーロード 実装

最終更新: 3月30日

こんにちは!

大阪府 和泉市でホームぺージ制作事業をしている和田英也と申します!


今回は実積の紹介です!

法政大学の6つの部活を紹介する法政オレンジ様のサイトにて、コーディングを担当させて頂きました!

実装した内容を紹介したいと思います。


(デザインはWixerDesign様)


▼ 実装した機能

ボタンを使ったデータベース呼び出し

ドロップダウンを使ったデータベース呼び出し

読み込み数に制限をかけ、スクロールとともに次のデータを表示するレイジーロード

データベース呼び出し (ボタン)

実際のぺージ https://www.hoseiorange.jp/football-player


こちらのぺージでは、FOOTBALLの選手データを呼び出します。

デフォルトでは全てのポジションの選手データが表示されています。


RBのボタンを押すと、Running backの選手データが呼び出されます。

見出しもALL→RB (Running back)に変化します。

また、RBを選択中はRBのボタンがオレンジ色に変化したままとなりますので、選択中であることが確認出来ます。


データベース呼び出し (ドロップダウン)

実際のぺージ https://www.hoseiorange.jp/football-schedule


こちらのぺージではFOOTBALLの試合スケジュールのデータを呼び出します。

デフォルトでは最新の情報順にスケジュールが表示されています。


年度の選択肢から、2018年を選択すると、2018年のデータが表示されます。


レイジーロード


実際のぺージ https://www.hoseiorange.jp/football-player


これはデータベースから表示させるデータが大量にある場合、そのぺージの読み込みが遅くなってしまう事を防ぐための方法です。


当ぺージでは1度に表示するデータ数を2つとして、スクロールとともに読み込みGIFアニメが現れ、直ちに次のデータを読み込んでいきます。


動作的にはかなりスムーズなため、特に不便は感じず、ページの読み込みは大幅に早くなります。



いかがでしたでしょうか?

これらは全てVelo by WixにてJavaScriptのコーディングを施した機能です。


ACTONEではVelo by Wixのコード開発に積極的に取り組んでおります。

ご依頼があれば当社までご連絡お願い致します。





27回の閲覧0件のコメント

最新記事

すべて表示