有沒有一種方法可以在HTML/JavaScript中指定多個圖像源？

有沒有辦法告訴瀏覽器查看圖像URL列表，直到它找到一個有效的？純HTML將是首選，但我猜測JavaScript可能是必要的（我已經使用JQuery，所以這不是問題）。有沒有一種方法可以在HTML/JavaScript中指定多個圖像源？

編輯：謝謝你的回答！我會補充一些說明：

「作品」我的意思是圖像可以顯示。
我特別想在客戶端做到這一點。

來源

2009-10-27 Imagist

定義「作品」。 – anddoutoi 2009-10-27 12:25:38

不，但是可以使用JavaScript/JQuery解決方案，而服務器端解決方案則是另一種選擇。 – rohancragg 2009-10-27 12:31:05

我覺得這個鏈接可以幫助您的問題 http://stackoverflow.com/a/9891041/2301588 – Sky 2013-05-20 07:57:39

這對我來說似乎是一個壞主意。這個功能的目的是什麼？這聽起來像你想要的東西相當於這個：

<img src="/images/file1.jpg" src2="/images/file2.jpg" src3="/images/file3.jpg">

當瀏覽器將嘗試在連續的每個文件。這種方法的問題是它顯着增加了所需的http流量和延遲。最好的方法是提前使用正確的圖像標籤動態構建頁面。使用服務器端方法，您可以嘗試從磁盤（或數據庫或圖像所在的位置）加載映像，並在頁面的圖像標記中動態地包含最佳網址。

如果你堅持這樣做的客戶端，你可以嘗試加載多個圖像標籤：

<img src="file1.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file2.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file3.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file4.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file5.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file6.jpg" alt="" onerror="this.style.display='none'">

這將導致出現有大量圖片的頁面，但他們消失在頁面加載。需要使用alt=""才能使Opera不顯示損壞的圖像佔位符; Chrome和IE需要onerror。

如果這不夠細膩，並且如果所有圖像的大小相同，並且大小已知，則可以將一堆圖像堆疊在一起，以便加載的第一張圖像隱藏所有圖像其他。這在Opera，FF和IE8中適用於我。它加載存在的列表中的最後一個圖像。請注意，這會浪費帶寬和內存，因爲每個映像都已加載。

<div style="width: 50px; height:38px; background-image: url(file1.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file2.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file3.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file4.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file5.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file6.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file7.jpg);"> 
</div></div></div></div></div></div>

最後，還有JavaScript的方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title></title> 
    <script type="text/javascript"> 
     var image_array = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg', 'file5.jpg','file6.jpg' ]; 
     function load_img(imgId, image, images, index) { 
     image.onerror = function() { 
      load_img(imgId, this, images, index+1); 
     }; 
     image.onload = function() { 
      var element = document.getElementById(imgId); 
      if (element) { 
      element.src = this.src; 
      element.style.display = 'block'; 
      } 
     }; 
     image.src = images[index]; 
     } 
    </script> 
    </head> 
    <body> 
    <img id="id_1" alt="" style="display: none;"> 
    </body> 
    <script> 
     load_img('id_1', new Image(), image_array, 0); 
    </script> 
</html>

來源

2009-10-27 13:39:14

如果不存在任何圖像，javascript解決方案將導致無限循環。你需要添加'if（index> = images.length）return;'作爲'load_img（..）'函數的第一行。 – Matt 2016-09-28 14:13:10

你可以輸入一些服務器端應用程序/腳本，無論從任何圖像源，它可以找到提供了圖像的URL。

你可以與發送內容類型=圖像/ JPG的響應一個HttpHandler爲此在ASP.Net。

除了ASP.Net有amny其他的服務器端選項如Perl，PHP ...

來源

2009-10-27 12:28:53 rohancragg

假設你指的是瀏覽器能夠檢索某些內容與HTTP響應代碼200爲特定的URL ，那麼答案是：客戶端只使用HTML。

換句話說，您不能擁有一個元素（例如img）並指定多個URL來「嘗試」。

當然，你可以通過精心設計在服務器端的東西：一個請求進入資源X和服務器的URL列表「工作」。

來源

2009-10-27 12:29:10 jldupont

INAJNBAM（我不是一個JavaScript忍者以任何方式），但在僞代碼，也許嘗試這樣的事情後，頁面加載：（OR，現在我想想，這將很好地工作用PHP太）

$images = array('img1.jpg', 'img2.jpg', 'img3.png'....) 
    foreach $images as $img 
     {if $img.height > 0px 
      {print "<img src="$img" />" 
      end} 
     };;;;

其實PHP甚至會更好，因爲我在JS想這會導致圖像在頁面加載結束閃爍在屏幕上。嘗試一下PHP，看看這樣的事情是否適合你的賬單。

注：我加入4-半冒號在末端。我知道Javascript總是想要他們，我只是不知道在哪裏堅持他們。

來源

2009-10-27 12:32:51

如果我正確地閱讀說明書，你應該能夠與HTML object element做到這一點。 <object>標籤可以嵌套，從而提供一系列資源，每個資源鏈輪流進行渲染，並在失敗時繼續執行下一個資源。

但請注意，此行爲對於多個瀏覽器和版本而言是/有問題的。

來源

2009-10-27 12:35:05 Joey

呀，可惜它仍然不是真正可用得益於當前的IE版本的支持較差。對於它被認爲可以完成的方式+1。 – bobince 2009-10-27 14:34:43

根據http://msdn.microsoft.com/en-us/library/cc304133%28VS.85%29.aspx它的工作原理IE 7，雖然當時DOM是錯誤的。 MS聲稱它在IE 8中完全支持，包括禁用嵌套對象的DOM可訪問性。 – Joey 2009-10-27 15:02:42

如果說「工程」是指圖像可以加載，您可以使用圖像上的「加載」功能（在你的情況下，一堆圖像）的jQuery和它內部聲明的功能將是一旦圖像加載完成，就會發生火災。

如果說「工作」你的意思是HTTP狀態代碼是好的，然後使用jQuery調用ajax調用。

function getUrlStatus(url) { 
    $.ajax({ 
     url: url, 
     complete: function(xhr) { 
      return xhr.status; 
     } 
    }); 
}

來源

2009-10-27 12:39:56 StarScream

如果你想多源設置取決於分辨率的圖像標籤，srcset就是你要找的paramenter。

<img src="images/space-needle.jpg" 
srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x, 
images/space-needle-hd.jpg 3x">

來源

2017-04-29 08:49:32 sekmo

有沒有一種方法可以在HTML/JavaScript中指定多個圖像源？

回答

相關問題