メモ帳: plugin

2012年3月13日火曜日

[jQuery]Lazy Loadで負荷低減できるか？

あるホスティングサービスで503エラーが出始めたため、
原因を調査したら同時アクセス数が増えてきた事が一番の原因のようでした。
そのサイトは画像を大量に利用することも原因に挙げられます。

なにか良い方法が無いかと調べたところ、画面の表示領域付近に近づいてから対象の画像を読み込むと言うjQueryプラグインがありました。

Lazy Load

使い方は非常に簡単です。
まず、<head>にjQueryと上記のプラグインを読み込みこんで、その実行コードを書きます。
以下のコードではオプション設定で、画面の表示範囲より200px広い範囲までをフェードインで読み込む。って感じです。

後は遅延ロードさせたい画像タグを以下のように書きます。
srcにはダミーの画像を設定しておき、data-originalに実際に読み込ませる画像を記述します。

これだけです。

とりあえず、503エラーの発生率は下がったので効果はあったと言えそうです。
ただ、完全には無くなってないので別の対策も必要そうです。

2011年10月27日木曜日

Uploadifyを使った。

複数画像を選択してアップロードする要件があったためUploadifyを使った。

オプション設定も豊富で使いやすいです。

ポップアップウィンドウで使ったのですが、IEではuploader、script、cancelImg、folderのパスを絶対パスで書かないと正常にPOSTされないんですね。

FireFox、Chromeでは相対パスでいけるのに。。。

気が向いたらSafariでも試してみます。

$(document).ready(function() {
$('#file_upload').uploadify({
'uploader'    : '/dev/agent/upload/uploadify.swf',
'script'      : '/dev/agent/upload/uploadify.php',
'cancelImg'   : '/dev/agent/upload/cancel.png',
'folder'      : '/dev/images/o_o/',
'auto'        : true,
'multi'       : true,
'fileExt'        : '*.jpg;',
'fileDesc'       : 'Image Files (.JPG)',
'queueSizeLimit' : 999 ,
'fileDataName' : 'Filedata' ,
'simUploadLimit' : 1,
'sizeLimit'   : 5000000
});
});