画像をプリロード / jQueryゼロから

画像のプリロードは前にもやったんだけど少し小技をはさんでみた。
プリロードしたって間に合わん時は間に合わんので、せめて見栄えが悪くないようにしようかってはなしです。

下記の感じで画像のプリロード時に読み込み完了後の処理を指定しちゃいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var imagePath = '/images/';
var preloadImages = [
    'ooo.jpg',
    'xxx.jpg',
    '***.jpg'
];
var images = [];

(function($){
    for (var i = 0; i < preloadImages.length; i++) {
        var image = new Image;
        image.src = imagePath + preloadImages[i];
        images.push($(image).hide());
        (function(i){
            image.onload = function(){
                images[i].fadeIn();
            };
        })(i);
    }
})(jQuery);

読み込みが間に合わなかった時のために画像は hide() で非表示にして、image.onload で読み込み完了時の動作を指定しました。
※今回だとfadeInさせてます

サンプル

カスタムフィールド使ってみる / よくあるWordPress

カスタムフィールドでやりくりした時のメモ。

お客さんに使ってもらう時は管理画面ライクなインターフェイスにしたいのでプラグインのカスタムフィールド・テンプレートを使ってます。
使い方はこちらが詳しいです。
http://39kn.com/2011/05/30/5486/

ということでPHPでテンプレ側の処理を。
カスタムフィールド・テンプレート使った場合はショートコードがあるんだけど、普通の人に使ってもらうにはわかりにくいのでテンプレ側で処理します。

カスタムフィールドのデータはget_post_customで連想配列で取得できます。

1
2
3
4
5
6
7
8
9
10
$custom = get_post_custom();

foreach ($custom as $key => $value) {
    if (substr($key, 0, 1) == '_') {
        continue;
    }
    switch ($key) {
        case ...
    }
}

同じ名前で複数登録できるので一旦取り出したほうがイイかも。
ただ、foreachだと余計な変数入ってるので、「_」で始まるものは除外しとく。
カスタムフィールド・テンプレート使っててもデータは同様に取得できます。