//調整webkit兼容性
var
indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
dbVersion = 1.0;
var
cn,db;
//打開數據庫
//第一個參數是數據庫名（打開即創建，沒有其它獨立的創建方法）
//其它參數以后解釋
var
cn=indexedDB.open(
"item"
);
//數據庫初始化事件
cn.onupgradeneeded=
function
(e){
//獲取數據庫對象
db=e.target.result;
//創建數據庫實例
//第一個是存儲對象名，類似關系數據庫的表名
//第二個參數是主鍵名，還有其他選項，可以設置自增的
var
o=db.createObjectStore(
"PicData"
,{keyPath:
"id"
}
);
};
//數據庫打開成功事件
cn.onsuccess=
function
(e){
//獲取數據庫對象
//因為上面的初始化事件未必會被調用到，這里當然也得獲取一次
db=e.target.result;
//這個doTransaction的參數是一個回調函數，可以把這個回調函數當作事物的過程使用
db.doTransaction=
function
(f){
//從事務對象閃使用objectStore訪問具體的存儲對象，並把結果傳給回調函數
f(db.transaction(
"PicData"
,
"readwrite"
).objectStore(
"PicData"
));
};
};
// 將圖片緩存的本地
function
fetchImage(id, type) {
var
src =
""
var
imageId = id;
if
(type ==
"small"
) {
src =
"../item/common/simpleImage.do?picId="
+id;
}
else
{
src =
"../item/common/simpleImage.do?type=b&picId="
+id;
imageId = (id+
"blimg"
);
}
var
elephant = document.getElementById(id);
elephant.src =
"../item/img/loading.gif"
;
try
{
var
readWriteMode =
typeof
IDBTransaction.READ_WRITE ==
"undefined"
?
"readwrite"
: IDBTransaction.READ_WRITE;
var
transaction = db.transaction([
"PicData"
], readWriteMode);
var
objectStore = transaction.objectStore(
"PicData"
);
var
request = objectStore.get(imageId);
request.onsuccess =
function
(event) {
var
data = event.target.result;
if
(data ==
null
) {
// Create XHR
var
xhr =
new
XMLHttpRequest(),
blob;
xhr.open(
"GET"
, src,
true
);
// Set the responseType to blob
xhr.responseType =
"blob"
;
xhr.addEventListener(
"load"
,
function
() {
if
(xhr.status === 200) {
// Blob as response
blob = xhr.response;
var
imgFile = blob;
// Get window.URL object
var
URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var
imgURL = URL.createObjectURL(imgFile);
// Set img src to ObjectURL
elephant.setAttribute(
"src"
, imgURL);
// Revoking ObjectURL
elephant.onload =
function
() {
window.URL.revokeObjectURL(
this
.src);
}
// Save data in indexDB
var
picData = {};
picData.id = imageId;
picData.blob = blob;
saveInIndexDB(picData);
}
},
false
);
// Send XHR
xhr.send();
}
else
{
console.log(
"Got image !"
);
// Get window.URL object
var
URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var
imgURL = URL.createObjectURL(request.result.blob);
// Set img src to ObjectURL
Imagess(imgURL,id);
//elephant.setAttribute("src", imgURL);
// Revoking ObjectURL
elephant.onload =
function
() {
window.URL.revokeObjectURL(
this
.src);
}
}
}
}
catch
(e) {
Imagess(src, id);
}
}
function
saveInIndexDB(picData) {
//調用我們自己添加的方法來處理一個事務
db.doTransaction(
function
(e){
e.add(picData);
});
}
//判斷是否加載完成
function
Imagess(url,imgid){
var
img=
new
Image();
img.src = url;
//判斷瀏覽器
var
Browser=
new
Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=
/msie/
.test(Browser.userAgent);
Browser.Moz=
/gecko/
.test(Browser.userAgent);
if
(Browser.ie){
img.onreadystatechange =
function
(){
if
(img.readyState==
"complete"
||img.readyState==
"loaded"
){
document.getElementById(imgid).src=img.src;
}
}
}
else
if
(Browser.Moz){
img.onload=
function
(){
if
(img.complete==
true
){
document.getElementById(imgid).src=img.src;
}
}
}
}
// 緩存數據
function
getItemPicId (currentPage) {
$.ajax({
type:
"post"
,
url:
"../item/common/cacheItemPic.do"
,
data:{
"currentPage"
:currentPage},
dataType:
"json"
,
error:
function
(){
},
success:
function
(data){
cacheItemPic(data.rows);
total = data.total;
}
});
}
// 保存到本地
function
cacheItemPic(data) {
for
(
var
i=0; i < data.length; i++) {
var
src =
""
var
imageId = data[i].ST_PIC_ID;
if
(data[i].NM_SORT ==
"1"
) {
src =
"../item/common/simpleImage.do?picId="
+imageId;
cacheImg (imageId, src);
}
src =
"../item/common/simpleImage.do?type=b&picId="
+imageId;
imageId = (imageId+
"blimg"
);
cacheImg (imageId, src);
}
function
cacheImg (imgId, imgSrc) {
try
{
var
readWriteMode =
typeof
IDBTransaction.READ_WRITE ==
"undefined"
?
"readwrite"
: IDBTransaction.READ_WRITE;
var
transaction = db.transaction([
"PicData"
], readWriteMode);
var
objectStore = transaction.objectStore(
"PicData"
);
var
request = objectStore.get(imgId);
request.onsuccess =
function
(event) {
var
data = event.target.result;
if
(data ==
null
) {
// Create XHR
var
xhr =
new
XMLHttpRequest(),
blob;
xhr.open(
"GET"
, imgSrc,
true
);
// Set the responseType to blob
xhr.responseType =
"blob"
;
xhr.addEventListener(
"load"
,
function
() {
if
(xhr.status === 200) {
// Blob as response
blob = xhr.response;
var
imgFile = blob;
// Save data in indexDB
var
picData = {};
picData.id = imgId;
picData.blob = blob;
saveInIndexDB(picData);
}
},
false
);
// Send XHR
xhr.send();
}
else
{
console.log(
"Got image !"
);
objectStore.
delete
(imgId);
console.log(
"delete data!"
);
// Create XHR
var
xhr =
new
XMLHttpRequest(),
blob;
xhr.open(
"GET"
, imgSrc,
true
);
// Set the responseType to blob
xhr.responseType =
"blob"
;
xhr.addEventListener(
"load"
,
function
() {
if
(xhr.status === 200) {
// Blob as response
blob = xhr.response;
var
imgFile = blob;
// Save data in indexDB
var
picData = {};
picData.id = imgId;
picData.blob = blob;
saveInIndexDB(picData);
}
},
false
);
// Send XHR
xhr.send();
}
}
}
catch
(e) {
console.log(
"cache image error!"
);
}
}
}