動態圖像標記

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等，最後加載默認圖片。

來源

2011-02-02 15:39:21

-1

大聲笑，這不能做只有一些標籤，你應該propably使js（jquery/ajax）函數來搜索該文件，然後更新img的href屬性...或者你應該解釋你的打算多一點

來源

2011-02-02 15:33:13

1

真的，你應該在服務器端做這樣的事情，文件實際在哪裏;製作一個腳本，查找圖像併發送它找到的內容。

（編輯刪除我原來的JS解決方案，因爲它是壞的，和其他人提出更好的。）

來源

2011-02-02 15:34:08

2

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

如果你得到的onerror，嘗試在你的列表中再次設置源到下一個圖像。

來源

2011-02-02 15:34:50 epascarello

0

聽起來像你可能需要使用一堆onerror處理程序。嘗試加載一些圖片，抓住可能的錯誤，直到你用完了候選人。加載佔位符作爲最後的圖像。

來源

2011-02-02 15:35:11

0

我會用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 
}

來源

2011-02-02 15:40:05 egze

+0

這是jQuery的BTW – egze 2011-02-02 15:40:33

0

既然你問有關如何使用標記做，我會告訴一個解決方案，但我從來沒有做我自己：

<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並行的辦法是去海事組織方式：

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

來源

2011-02-02 16:13:37

動態圖像標記

回答

相關問題