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