Question

有没有办法告诉浏览器查看图片网址列表，直到找到有效的图片网址？纯HTML将是首选，但我猜这里可能需要JavaScript（我已经在使用JQuery了，所以这不是问题）。

编辑：谢谢你的回答！我将补充一些说明：

“工作”是指可以显示图像。
我特意想在客户端这样做。

Answer 1

如果我正确阅读规范，您应该可以使用HTML object element执行此操作。 <object>标签可以嵌套，从而提供一系列资源，每个资源依次进行渲染，一旦失败，用户代理就会继续使用下一个。

但请注意，对于多个浏览器和版本，此行为是错误的。

Answer 2

这对我来说似乎是一个坏主意。这个功能的目的是什么？听起来你想要的东西与此相当：

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

浏览器会连续尝试每个文件。这种方法的问题在于它显着增加了所需的http流量和延迟。最好的方法是提前使用正确的图像标签动态构建页面。使用服务器端方法，您可以尝试从磁盘（或数据库或图像所在的位置）加载图像，并动态地在页面的图像标记中包含最佳URL。

如果你坚持在客户端进行，你可以尝试加载多个图像标签：

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

Answer 3

如果您尝试根据分辨率为图片代码设置多个来源，则srcset是您正在寻找的参数。

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

Answer 4

假设您的意思是浏览器能够使用特定URL的HTTP响应代码200检索某些内容，那么答案是：客户端使用HTML时为NO。

换句话说，您不能拥有元素（例如img）并指定多个网址来“尝试”。

当然，你可以在服务器端制作一些东西：资源X有一个请求，服务器有一个“工作”的URL列表。

Answer 5

INAJNBAM（我不是任何Javascript Ninja），但是在伪代码中，也许在页面加载后尝试这样的东西:(或者，现在我想起来了，这也适用于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总是想要他们，我只是不知道在哪里坚持他们。

Answer 6

如果通过说“工作”你的意思是可以加载图像，你可以在jQuery的图像（在你的情况下是一堆图像）上使用“加载”功能，并在其中声明将触发的功能一旦完成图像的加载。

如果说“工作”意味着HTTP状态代码正常，那么使用jquery使用ajax调用。

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

Answer 7

您可以输入一些服务器端应用程序/脚本的URL，该脚本可以从它可以找到的任何图像源提供图像。

您可以在ASP.Net中使用HTTPHandler执行此操作，该HTTPHandler发送content-type = image / jpg的响应。

除了ASP.Net之外，还有其他服务器端选项，如Perl，PHP ......

有没有办法在HTML / JavaScript中指定多个图像源？

7 个答案: