Question

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

感谢。

Answer 1

var img = new Image();
img.onload = function(){ alert("I am loaded"); };
img.onerror = function(){ alert("I am not loaded"); };
img.src = "/foo/bar.gif";

如果您发现错误，请尝试将来源再次设置为列表中的下一个图像。

Answer 2

我会选择这样的剧本：

<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等中，最后加载默认图片。

Answer 3

真的，你应该在服务器端做这样的事情，文件实际上是这样的;制作一个查找图像的脚本并发送它找到的内容。

（编辑删除我原来的JS解决方案，因为它很糟糕，其他人提出了更好的解决方案。）

Answer 4

听起来你可能需要使用一堆onerror处理程序。尝试加载一些图像，捕获可能的错误，直到你的候选人用完为止。将占位符加载为最后一个图像。

Answer 5

我用Ajax解决它，尝试加载每个图像，如果你得到200意味着图像存在，如果404尝试下一个图像。

var images = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg'];
var imageExists = false;
for(var i = 0; i < images.length; i++){
  if(!imageExists){
    $.ajax({
      url: images[i],
      async: false,
      success: function(){
        // use images[i] as your image
        imageExists = true;
      }
    });
  }
}
if(!imageExists) {
  // use default image
}

Answer 6

既然你在询问如何使用标签我会展示一个解决方案，虽然我自己从不这样做：

<script>
urlsToTry = ['http://url2.com','http://url3.com','http://you.get.the.picture.com','http://www.google.com/images/logos/ps_logo2.png'];
</script>
<img src="http://url1.com" style="display: none;" onload="this.style.display='block';" onerror="if(urlsToTry.length) { this.src = urlsToTry.shift(); } else { alert('none of the urls worked!'); }">

您可以在此处查看示例：http://jsfiddle.net/LLQLH/1/

这种方法的一个缺点是，它试图连续加载图片，如果它们全部失败，可能会导致相当长的等待。使用正确的js的并行方法将是imo的方法：

<script>
var loadQueue={};
var urlsToTry = ['http://url1.com','http://url2.com','http://url3.com','http://you.get.the.picture.com'];

function showTag(url) {
    var tag = document.getElementById('myimage');
    if(url) tag.src = url; 
    tag.style.display='inline-block';       
}

function onLoadEventHandler(url) {
    return function() {
        delete loadQueue[url];
        for(var i = 0, img; img = loadQueue[i]; i++) {
            img.onload = null;
        }
        loadQueue = null;
        showTag(this.src);
    }
}

function onErrorEventHandler(url) { 
    return function() {
        delete loadQueue[url];
        for(var i in loadQueue) return;
        showTag(); //we will only get here if loadQueue is empty
    }
}

for(var i = 0, url; url = urlsToTry[i]; i++) {
    loadQueue[url] = new Image();
    loadQueue[url].onload = onLoadEventHandler;
    loadQueue[url].onerror = onErrorEventHandler(url);
    loadQueue[url].src = url;
}
</script>
<img id="myimage" src="http://www.google.com/images/logos/ps_logo2.png" style="display: none;">

您可以在此处看到它：http://jsfiddle.net/DJ2SH/

Answer 7

大声笑，这不能只用一些标签来完成，你应该可以让js（jquery / ajax）函数来搜索那个文件，然后更新img的href属性......或者你应该多解释一下你的意图< / p>

动态图片标签

7 个答案: