javascript - 动态图像标签

Question

如何创建一个标签，在 10 个不同的文件夹中查找图像名称，如果未找到，则使用 Javascript 输出占位符图像？

谢谢。

Answer 1

我会使用这样的脚本:

<script type="text/javascript">
var arrPossibleImageFolders = ["folder1", "folder2", "folder3"];
var strDefaultImage = "nopicture.gif";
function TryDifferentFolder(oImage) {
    var folderIndex = parseInt(oImage.getAttribute("folder_index"), 10);
    if (isNaN(folderIndex))
        folderIndex = 0;
    folderIndex++;
    if (folderIndex >= arrPossibleImageFolders.length) {
        oImage.src = strDefaultImage;
        return;
    }

    var lastSlashIndex = oImage.src.lastIndexOf("/");
    var strNewSource = arrPossibleImageFolders[folderIndex] + "/" + oImage.src.substr(lastSlashIndex);
    oImage.src = strNewSource;

    oImage.setAttribute("folder_index", folderIndex + "");
}
</script>

然后有这样的图像标签来触发代码:

<img src="folder1/mypicture.gif" onerror="TryDifferentFolder(this);" />

这将首先在folder1中搜索“mypicture.gif”，然后如果找不到(触发onerror)将在folder2等中尝试，最后加载默认图片。