スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」
- 2015-07-23 Thu 17:35:22
- ユーティリティ
最近またよく見かけるようになってきた動きのひとつなので、ご紹介します。
スクロールしたら、画像を読み込むようにすることで、上手にコーディングすればロード時間も短縮できるかもなプラグインです。
画像がフェードインアニメーションするのを見ているだけでも、なんとなく「手が掛かっているように見える」という効果もあるかもです。
Demo
見たほうがきっとはやいので、デモはこちらから。
→basic options
→with fadein effect
設定方法
■js読み込み
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
■画像読み込み（srcではなく、 data-originalにurlを入れるのがコツ。）
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
■スクリプトを最後に。
<script>
$(function() {
$("img.lazy").lazyload();
});
</script>
☆
どの距離で読み込むか、アニメーションなども設定できて便利ですね。
ご参考にどうぞ。
Lazy Load Plugin for jQuery
- 関連記事
- スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」
- Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる
- 自分色にハックする21世紀エディタ「Atom」
- ウェブ上の画像データを圧縮＆加工するサービス（Mac&オンラインツール）
- 食べたごはんを写真で記録できる「お料理アルバム by クックパッド」