slideshow系ライブラリのいけてないところ

javascriptのお話。
現存する全てのライブラリを読んだ訳ではないのだが、一般的に広まってるslideshow系ライブラリのいけてないところは、次の点だと思う。

• 画像を全て読み込んでからslideshowを生成している

今回の
http://pic2ch.giox.org/
の場合、1ページで画像が2000枚を超えることもある為、一度に全て読み込むなんてことはできない。
かといって、画像きりかえ時にダウンロードしていたらパフォーマンスが最悪なので、今回は画像の先読みをした。
画像の先読みはクライアントアプリの画像ビューアである「mangameeya」等でも使われており、現在見ている画像の次の画像を、切り替え前にあらかじめメモリにロードしておき、画像切り替えをストレスなく行えるようにしている。

http://pic2ch.giox.org/でも同じように、現在みてる画像の次の画像をあらかじめダウンロードして、画像の切り替えをストレスなく行うことを実現した。

実装はこんな感じ

var max_preload = 5;
var load_images = [];
var urls = ['1.jpg', '2.jpg',,,,];
var position = 0; // 画像を切り替える毎にインクリメント
var preload = function() {
    var load_position = load_images.length;
    if (urls.length == load_position) return;
    var stock = load_position - (position + 1);
    if (stock < max_preload) {
        var img = new Image();
        img.src = urls[load_position];
        img.onload = function() {};
        img.onerror = function() {};
        load_images.push(img);
        preload();
    }
    setTimeout(preload, 500);
};

少々複雑になっていますが、これで画像を見ている裏でこっそりダウンロードされます。
パフォーマンス的にも良いかと思います。