Question

这非常适合填充占位符来代替不存在的图像。

<img src="cantfind.jpg" onError="this.onerror=null;this.src='http://placehold.it/600x600?text=No Picture'">

我感到好奇的是，是否有办法在onError事件中做两个占位符。所以我尝试这样做，但Javascript不是来找我。有任何想法吗？我尝试将url分配给变量，但我不知道如何在没有做一些凌乱的xhr请求或其他事情的情况下检查第一个占位符是否失败。

Answer 1

检查当前src是否等于其中一个占位符并相应地分配一个新网址：

onerror="
    var p1='http://.......', p2='http://......'; 
    if (this.src == p1) this.src = p2; else if (this.src != p2) this.src = p1;
"

Answer 2

这是通过递归事件处理来实现它的一种方法...尝试加载并且如果它出错，那么尝试从数组加载第一个元素，并将其设置为错误，下一个索引失败，直到你点击索引超出范围，此时停止。

这适用于sources数组中任意数量的已定义占位符。

<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>

如何有两个后备图像占位符

2 个答案: