有没有办法在纯 Javascript 或 React 中处理多个图像回退?
我知道我们可以处理一张后备图像onError().
如果我们想做另一个后备图像怎么办?
提前致谢!
每次设置导致错误的 src 时,都会调用图像的 onerror 回调。
因此,对于原生 js 解决方案,您可以保留一个后备图像列表,并在每次调用回调时增量地遍历该列表,直到耗尽为止。
var fallbacks = ["1.jpg","2.jpg","https://placebear.com/g/100/100","4.jpg"];
var image = new Image;
image.dataset["fallback"] = 0;
image.onerror = function(){
console.log("onerror triggered");
var fallbackIndex = this.dataset["fallback"];
//check to see if we exhausted the fallbacks
if(fallbackIndex > fallbacks.length-1) return;
//set the fallback image
this.src = fallbacks[fallbackIndex];
//increment the index incase onerror is called again
image.dataset["fallback"]++;
}
document.body.appendChild(image);
image.src = "doesntexist.jpg";
请注意,您不必在 JavaScript 中保留后备。您可以将后备放入元素本身的数据属性中,并通过 dataset 属性检索它
document.querySelector("img").addEventListener("error",function(){
var fallbackIndex = this.dataset["fallback"];
var fallbacks = this.dataset["fallbacks"].split(",");
if(fallbackIndex > fallbacks.length-1) return;
this.src = fallbacks[fallbackIndex];
this.dataset["fallback"]++;
});
<img src="" data-fallback="0" data-fallbacks="1.jpg,2.jpg,https://placebear.com/g/100/100,4.jpg" />
对于 React 你基本上会做同样的事情,但是通过它们的语法,完整演示 http://jsfiddle.net/df2grob6/
class ImageWithFallbacks extends React.Component {
constructor(props) {
super(props);
this.state = {
src: props.src,
fallbackIndex: 0
}
this.props.fallbacks = this.props.fallbacks.split(",");
}
onError() {
console.log("errored",this.state.fallbackIndex);
if(this.state.fallbackIndex > this.props.fallbacks.length){
return;
}
this.setState({
src: this.props.fallbacks[this.state.fallbackIndex],
fallbackIndex: this.state.fallbackIndex+1
});
}
render() {
return <img src={this.state.src} onError={()=>this.onError()} />;
}
}
<ImageWithFallbacks src="nonexistent.jpg" fallbacks="1.jpg,2.jpg,https://placebear.com/g/100/100,4.jpg" />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)