tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web: fix image loading error

Browse Source 
Signed-off-by: 田梓萱 <tianzixuan@bixin.cn>
This commit is contained in:
田梓萱 2023-10-27 10:14:01 +08:00
parent b42dd438f0
commit cc8976eefe
No known key found for this signature in database
GPG Key ID: 0B465732141CC7FD
3 changed files with 104 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
doric-web/dist/index.js vendored
View File

@ -7436,54 +7436,67 @@ var doric_web = (function (exports, axios, sandbox) {
v.style.filter = '';
}
break;
case 'hidden':
super.blendProps(v, propName, prop);
if (prop == true) {
this.loadIntoTarget(v, '');
}
break;
default:
super.blendProps(v, propName, prop);
break;
}
}
loadIntoTarget(targetElement, src) {
this.clearStretchElementAttributes(targetElement);
this.loadPlaceHolder(targetElement);
let tempLoadElement = this.stretchInset ? document.createElement('img') : targetElement;
tempLoadElement.onload = () => {
if (this.stretchInset) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(entry => {
this.onResize.call(this, { width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight });
});
this.resizeObserver.observe(targetElement);
}
this.onResize({ width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight });
}
//remove placeHolderColor
targetElement.style.removeProperty('background-color');
if (tempLoadElement.src === src && this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId, {
width: tempLoadElement.naturalWidth,
height: tempLoadElement.naturalHeight,
});
}
};
tempLoadElement.onerror = () => {
if (src) {
this.clearStretchElementAttributes(targetElement);
const error = this.getError(targetElement.offsetWidth, targetElement.offsetHeight);
if (!error)
return;
const same = src === error;
const srcLoadError = tempLoadElement.src.length === 0 || tempLoadElement.src === src;
if (same || !srcLoadError)
return;
targetElement.src = error;
if (this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId);
}
};
Promise.resolve().then(e => {
tempLoadElement.src = src;
if (this.stretchInset) {
this.loadImageWithStretch(targetElement, src, this.stretchInset);
}
});
this.loadPlaceHolder(targetElement);
let tempLoadElement = this.stretchInset ? document.createElement('img') : targetElement;
tempLoadElement.onload = () => {
if (this.stretchInset) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(entry => {
this.onResize.call(this, { width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight });
});
this.resizeObserver.observe(targetElement);
}
this.onResize({ width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight });
}
//remove placeHolderColor
targetElement.style.removeProperty('background-color');
if (tempLoadElement.src === src && this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId, {
width: tempLoadElement.naturalWidth,
height: tempLoadElement.naturalHeight,
});
}
};
tempLoadElement.onerror = () => {
this.clearStretchElementAttributes(targetElement);
const error = this.getError(targetElement.offsetWidth, targetElement.offsetHeight);
if (!error)
return;
const same = src === error;
const srcLoadError = tempLoadElement.src.length === 0 || tempLoadElement.src === src;
if (same || !srcLoadError)
return;
targetElement.src = error;
if (this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId);
}
};
Promise.resolve().then(e => {
tempLoadElement.src = src;
if (this.stretchInset) {
this.loadImageWithStretch(targetElement, src, this.stretchInset);
}
});
}
else {
this.clearStretchElementAttributes(targetElement);
targetElement.style.display = 'none';
return;
}
}
loadImageWithStretch(v, src, stretchInset) {
v.src = transparentBase64;

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

86
doric-web/src/shader/DoricImageNode.ts
View File

@ -89,6 +89,12 @@ export class DoricImageNode extends DoricViewNode {
v.style.filter = ''
}
break
case 'hidden':
super.blendProps(v, propName, prop);
if (prop == true) {
this.loadIntoTarget(v, '');
}
break;
default:
super.blendProps(v, propName, prop)
break
@ -96,46 +102,52 @@ export class DoricImageNode extends DoricViewNode {
}
private loadIntoTarget(targetElement: HTMLImageElement, src: any) {
this.clearStretchElementAttributes(targetElement)
this.loadPlaceHolder(targetElement)
let tempLoadElement = this.stretchInset ? document.createElement('img') : targetElement
tempLoadElement.onload = () => {
if (this.stretchInset) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(entry => {
this.onResize.call(this, { width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight })
})
this.resizeObserver.observe(targetElement)
}
this.onResize({ width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight })
}
//remove placeHolderColor
targetElement.style.removeProperty('background-color')
if (tempLoadElement.src === src && this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId, {
width: tempLoadElement.naturalWidth,
height: tempLoadElement.naturalHeight,
})
}
}
tempLoadElement.onerror = () => {
if (src) {
this.clearStretchElementAttributes(targetElement)
const error = this.getError(targetElement.offsetWidth, targetElement.offsetHeight)
if (!error) return
const same = src === error
const srcLoadError = tempLoadElement.src.length === 0 || tempLoadElement.src === src
if (same || !srcLoadError) return
targetElement.src = error
if (this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId)
this.loadPlaceHolder(targetElement)
let tempLoadElement = this.stretchInset ? document.createElement('img') : targetElement
tempLoadElement.onload = () => {
if (this.stretchInset) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(entry => {
this.onResize.call(this, { width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight })
})
this.resizeObserver.observe(targetElement)
}
this.onResize({ width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight })
}
//remove placeHolderColor
targetElement.style.removeProperty('background-color')
if (tempLoadElement.src === src && this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId, {
width: tempLoadElement.naturalWidth,
height: tempLoadElement.naturalHeight,
})
}
}
tempLoadElement.onerror = () => {
this.clearStretchElementAttributes(targetElement)
const error = this.getError(targetElement.offsetWidth, targetElement.offsetHeight)
if (!error) return
const same = src === error
const srcLoadError = tempLoadElement.src.length === 0 || tempLoadElement.src === src
if (same || !srcLoadError) return
targetElement.src = error
if (this.onloadFuncId) {
this.callJSResponse(this.onloadFuncId)
}
}
Promise.resolve().then(e => {
tempLoadElement.src = src
if (this.stretchInset) {
this.loadImageWithStretch(targetElement, src, this.stretchInset)
}
})
} else {
this.clearStretchElementAttributes(targetElement)
targetElement.style.display = 'none';
return;
}
Promise.resolve().then(e => {
tempLoadElement.src = src
if (this.stretchInset) {
this.loadImageWithStretch(targetElement, src, this.stretchInset)
}
})
}
private loadImageWithStretch(v: HTMLImageElement, src: any, stretchInset: StretchInset) {