メモ帳: jQuery

ラベル jQuery の投稿を表示しています。すべての投稿を表示

2012年3月13日火曜日

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

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

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

Lazy Load

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

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

これだけです。

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

2011年11月29日火曜日

ajaxuploadを使った。

ブラウザで画像を選択したら、非同期でアップロードして画像を表示したくて使いました。
配布サイトここ(Ajax Upload)

最新版は完全に作り直されたらしくて、「File Upload」って名前に変わってます。
これも色々と試したみたのですが、UI周りのカスタマイズがいまいち分からなかった。

オプション設定で、template、fileTemplate、classesの当たりを設定すれば良さそう何だけど、
ドキュメントも少ないし、心が折れてあきらめました。

その点、旧バージョンのajaxuploadはiframeとか使って怪しいけど、素直で使いやすいです。

$(function(){
 new AjaxUpload('file1', { //input type="file"のid
  action: 'upload.php', //POSTを処理するphp
  name: 'PostName',  //phpで$_FILES['PostName']と使う。
  data: {paramA: 'valueA' ,paramB:'valueB'},  //オプションのデータ。$_POSTで渡される
  onComplete: function(file, response) {   //アップロード完了時のコールバック
   var ret = eval( '(' + response + ')' );  //JSONの展開
   if( ret.success ){
    $('#imageArea').attr('src', ret.path); //イメージの設定
   }
  }
 });

);

PHP側はこんな感じです。

//オプションパラメータの受取
$param = $_POST['paramA'];
$ret = null;
$uploaddir = 'D:\\upload\\';
$filename = basename($_FILES['PostName']['name'])
$uploadfile = $uploaddir . $filename;

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
 $ret = array('success'=>true,'path'=>'/images/' . $filename);
} else {
 $ret = array('success'=>false);
}
echo htmlspecialchars(json_encode($ret), ENT_NOQUOTES);

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
});
});