最近、スライドショー何回か依頼されております。
最近使ったもの・・・・ライブラリ名だけ。
○ SudoSlider　デモ
○ FlexSlider2
・
・
・
○ 自作
かなり試したけど忘れてる・・・アカンｗ
なかでも上記２つが最終的に残りました。

いろいろいじってみると SudoSliderではやりにくいものがあって結果、FlexSlider2に落ち着きそうだったんです。
でも、アルバムみたいな写真数でスライドショー・・・ってなるとPHPで回して出力HTMLは <img src=”～～　って何個書くのぉぉぉ・・・って感じになっちゃう。
で、それをブラウザで見ると一気に何個イメージ持ってくんのヨォおおぉ・・・ってなっちゃう。
ま、当たり前。
で、遅延読込を考えたら SudoSliderって最初から　ajax [ ・・・・ ] っていうプロパティがあって画像を Javascriptに書くんだけど、それだけでよかったりしました。
・・・ただ、いろいろあって・・・

・・・というわけで調べた結果、英語の文献しか見つからなかったんだけど
FlexSlider2　＋　Lazyload　の組み合わせが良さそう・・・ってことで、今回作ってみたのですよ。
（参考：Lazyloadの記事）
結果・・・劇的・・・ってわけでもないけど、スマホなんかでは重すぎてブラウザ落ちちゃうものとかもあったのが、なんとか見られるようになりました。
そのコードがこれ・・・
スクリプト部　ライブラリの読込含む

<link rel="stylesheet" type="text/css" href="js/flexslider.css"/>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" >
   jQuery(document).ready(function(){
        jQuery('.flexslider').flexslider({
             start: function (flexslider) {
                   // lazy load
                   jQuery(flexslider).find("img.lazy").each(function () {
                      var src = jQuery(this).attr("data-src");
                      jQuery(this).attr("src", src).removeAttr("data-src");
                   });
                 }
        });
   });
</script>


そんでもって、表示部がこれです。

<div id="container">
<div class="flexslider">
<ul class="slides">
<?php
    foreach ($files as $file) {
?>
<li><a href="<?php echo $file->path; ?>"><img class="lazy" src="images/loading.gif" data-src="<?php echo $file-/>path; ?>" /></a></li>
<?php
        }
    }
?>
</ul>
<br clear="all" />
</div>
</div>

はじめにHTMLの方には　Loading… 画像をいっぱいはるイメージですね。
その後、読み込めたところから　data-src　を　src　に入れてあげたら、本物登場　with フェードイン　という感じです。

いやー、手が空いたらサンプル作りますね。
↓
サンプル作りました！
http://ful.jp/resources/ajax/flexLazy/

では、また。
参考になれば幸いです。

株式会社ジーティーアイ

超テキトーな感じですがサンプルをダウンロードできます・・・↓↓
一式を、ZIP形式に圧縮しております。
FlexSlider2+Lazyloadサンプル　ダウンロードする

2014/4/22
Facebookの「いいね！」をいただかなくてもダウンロード出来るようにしました。

気に入ったら是非Facebook株式会社ジーティーアイ に「いいね！」ください。

よろしくお願いいたします！

—- 追記 2014/5/23 —-
デモを変更しました！
●●●●●●●●　のようなコントロール並びに「＜」と「＞」のコントロールが以前のバージョンでは出ていませんでした。
その修正を行いました。
どうぞよろしくお願いいたします。

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
Twitter で