//调整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.οnlοad=
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!"
);
}
}
}
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
