PageFlip 高速化
Dynamic PageFlip V2 の問題点として、読み込みに時間がかかり最悪途中で止まってしまうことがあげられている。またメモリー消費量が多くめくりが重くなることがある。
これを解決すために、事前にブラウザキャッシュに各ページの画像を読み込ませてしまえば、Dynamic PageFlip そのものの読み込みがサーバからではなく、キャッシュから読み込まれるので、loading が飛躍的に早くなる。またメモリー消費量が少なくなる。
手順
１．xml ファイルを読み込み、対象画像をブラウザに表示
２．各ページの画像が読み込まれたのを確認
３．各ページが読み込まれていなければ、1にもどる。
４．すべての画像が読み込まれていない場合、1に戻るが、キャッシュにたまっているので、残りが続きで読み込まれる。
５．すべて読み込まれていれば、Dynamic PageFlip V2 へジャンプする。
152Pサンプル
338Pサンプル
電子カタログ
300ページを超えるものも軽快に読み込めて動作可能。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Loading XML & Dynamic PageFlip V2.13</title>
<link href="./css/base.css" type=text/css rel=stylesheet>
</head>
<body>
<div id="bbase">
<div id="now_loading">
now <img src="./images/loader.gif" style="border:0; width:48px;
loading
</div>
<div id="img_area">
<script language="javascript">
var pg = "338" ;
var cat_id = "man_Y_srt100_configs" ;
fl_name=cat_id+".xml" ;
xml_doc = new ActiveXObject("Microsoft.XMLDOM");
xml_doc.async = false;
xml_doc.load(fl_name);
var string = "<p>" ;
if (xml_doc.documentElement.hasChildNodes()) {// xml 読み込み
var i = 0;
var j = xml_doc.documentElement.childNodes.length ;
var img_src = "";
var load_flg ="";
while (i < j) {// 各ページの画像を読み込み
img_src = xml_doc.documentElement.childNodes.item(i).attributes.item(0).text;
load_flg = xml_doc.documentElement.childNodes.item(i).attributes.item(1).text;
string += "<img src='"+ img_src + "' id='img" + i + "' /> " ;
i++;
if (i % 20==0) {// 20 行で折り返し
string += "<br /> " ;
}
}
}
string += "<br />" + i + " Pages<br/></p>" ;
document.write(string) ;
flg = "" ;
pg_interval = pg*100/2 ;
timerID=setInterval("check_func()", pg_interval) ;// タイマーをページ数の半分秒に設定
</script>
</div>
</div>
</body>
<script type="text/javascript">
function check_func() {
var pg = "338" ;
var cat_id = "man_Y_srt100_configs" ;
for (i=1; i<=pg; i++){
pg_len = pg.length;
img_num = "00"+i;
img_val = img_num.substring(img_num.length-pg_len,img_num.length);
if (document.getElementById("img"+i)) { // 読み込のタイミングが合わない場合がある
if (document.getElementById("img"+i).complete) { // // 画像の読み込みが完了か
flg=flg+"";
document.getElementById("img"+i).src="./images/red.gif" ;
}else {
flg=flg+"ng"+i;
}
}
}
if (flg!="") {
timerID=setInterval('jump_Index(cat_id)', 1000) ;
} else {
timerID=setInterval('jump_Para(cat_id)', 2000) ;
}
}
function jump_Index(cat) {
location.href="book.php?CatID="+cat;// もう一度
}
function jump_Para(cat) {
location.href="book2.php?CatID="+cat;// Dynamic PageFlip へジャンプ
}
</script>
</html>
サンプルは、book.php 読み込み中にソースの表示で可能。
これを解決すために、事前にブラウザキャッシュに各ページの画像を読み込ませてしまえば、Dynamic PageFlip そのものの読み込みがサーバからではなく、キャッシュから読み込まれるので、loading が飛躍的に早くなる。またメモリー消費量が少なくなる。
手順
１．xml ファイルを読み込み、対象画像をブラウザに表示
２．各ページの画像が読み込まれたのを確認
３．各ページが読み込まれていなければ、1にもどる。
４．すべての画像が読み込まれていない場合、1に戻るが、キャッシュにたまっているので、残りが続きで読み込まれる。
５．すべて読み込まれていれば、Dynamic PageFlip V2 へジャンプする。
152Pサンプル
338Pサンプル
電子カタログ
300ページを超えるものも軽快に読み込めて動作可能。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Loading XML & Dynamic PageFlip V2.13</title>
<link href="./css/base.css" type=text/css rel=stylesheet>
</head>
<body>
<div id="bbase">
<div id="now_loading">
now <img src="./images/loader.gif" style="border:0; width:48px;
loading
</div>
<div id="img_area">
<script language="javascript">
var pg = "338" ;
var cat_id = "man_Y_srt100_configs" ;
fl_name=cat_id+".xml" ;
xml_doc = new ActiveXObject("Microsoft.XMLDOM");
xml_doc.async = false;
xml_doc.load(fl_name);
var string = "<p>" ;
if (xml_doc.documentElement.hasChildNodes()) {// xml 読み込み
var i = 0;
var j = xml_doc.documentElement.childNodes.length ;
var img_src = "";
var load_flg ="";
while (i < j) {// 各ページの画像を読み込み
img_src = xml_doc.documentElement.childNodes.item(i).attributes.item(0).text;
load_flg = xml_doc.documentElement.childNodes.item(i).attributes.item(1).text;
string += "<img src='"+ img_src + "' id='img" + i + "' /> " ;
i++;
if (i % 20==0) {// 20 行で折り返し
string += "<br /> " ;
}
}
}
string += "<br />" + i + " Pages<br/></p>" ;
document.write(string) ;
flg = "" ;
pg_interval = pg*100/2 ;
timerID=setInterval("check_func()", pg_interval) ;// タイマーをページ数の半分秒に設定
</script>
</div>
</div>
</body>
<script type="text/javascript">
function check_func() {
var pg = "338" ;
var cat_id = "man_Y_srt100_configs" ;
for (i=1; i<=pg; i++){
pg_len = pg.length;
img_num = "00"+i;
img_val = img_num.substring(img_num.length-pg_len,img_num.length);
if (document.getElementById("img"+i)) { // 読み込のタイミングが合わない場合がある
if (document.getElementById("img"+i).complete) { // // 画像の読み込みが完了か
flg=flg+"";
document.getElementById("img"+i).src="./images/red.gif" ;
}else {
flg=flg+"ng"+i;
}
}
}
if (flg!="") {
timerID=setInterval('jump_Index(cat_id)', 1000) ;
} else {
timerID=setInterval('jump_Para(cat_id)', 2000) ;
}
}
function jump_Index(cat) {
location.href="book.php?CatID="+cat;// もう一度
}
function jump_Para(cat) {
location.href="book2.php?CatID="+cat;// Dynamic PageFlip へジャンプ
}
</script>
</html>
サンプルは、book.php 読み込み中にソースの表示で可能。
［2007-08-24］page top