这对于填充占位符代替不存在的图像非常有效。
<img src="cantfind.jpg" onError="this.onerror=null;this.src='http://placehold.it/600x600?text=No Picture'">
我好奇的是是否有办法在onError事件中做两个占位符。所以我尝试这样做,但Javascript没有来找我。有什么想法吗?我尝试将 url 分配给变量,但我不确定如何在不执行一些混乱的 xhr 请求或其他操作的情况下检查第一个占位符是否失败。
检查当前src
是否等于其中一个占位符,并相应地分配一个新的 url:
onerror="
var p1='http://.......', p2='http://......';
if (this.src == p1) this.src = p2; else if (this.src != p2) this.src = p1;
"
这是通过递归事件处理实现的一种方法...尝试加载,如果出现错误,请尝试从数组中加载第一个元素,并将其设置为失败时下一个索引的 ERROR,直到您命中超出范围的索引,此时停止。
这迎合了源数组中任意数量的已定义占位符。
<img id="img" src="example.jpg" onerror="loadNextImage(0);" alt="logo image">
<script>
var imagesDir = 'path/to/images/directory/';
var sources = [ '01.jpg', 'test.gif', 'bamf.jpg', 'foobar.jpg' ];
var index = 0;
function loadNextImage(index) {
var image = document.getElementById('img');
if (index < sources.length) {
console.log('Index:', index, sources[index]);
image.onerror = function() { loadNextImage(index + 1); };
image.src = imagesDir + sources[index];
} else {
image.alt = 'No suitable image found to display';
}
}
</script>