如何有两个回退图像占位符

How to have two fallback image placeholders

本文关键字：两个 回退 图像 占位符      更新时间：2023-09-26

这对于填充占位符代替不存在的图像非常有效。

<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>
相关文章：