有没有一种方法可以在HTML / JavaScript中指定多个图像源？ [英] Is there a way to designate multiple image sources in HTML/JavaScript?

问题描述

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

编辑：谢谢你你的答案！我会补充一些说明：

1. 作品是指图片可以显示。


2. 我特别想在客户端执行此操作。

对我来说不好的主意。这个功能的目的是什么？这听起来像你想要的东西等同于此：

 < img src =/ images / file1.jpgsrc2 = /images/file2.jpgsrc3 =/ images / file3.jpg> 
  

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

<如果你坚持做客户端，你可以尝试加载多个图片标签：

 < img src = file1.jpgalt =onerror =this.style.display ='none'> 
< img src =file2.jpgalt =onerror =this.style.display ='none'> 
< img src =file3.jpgalt =onerror =this.style.display ='none'> 
< img src =file4.jpgalt =onerror =this.style.display ='none'> 
< img src =file5.jpgalt =onerror =this.style.display ='none'> 
< img src =file6.jpgalt =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 // ENhttp://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']; 
函数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_1alt =style =display：none;> 
< / body> 
< script> 
 load_img（'id_1'，new Image（），image_array，0）; 
< / script> 
< / html> 
  

Is there a way to tell the browser to look down a list of image URLs until it finds one that works? Pure HTML would be preferred, but I'm guessing JavaScript is probably necessary here (I'm already using JQuery, so it's not an issue).

EDIT: Thanks for your answers! I'll add a few clarifications:

1. By "works" I mean the image can be displayed.
2. I specifically want to do this on the client side.

解决方案

This seems like a bad idea to me. What is the purpose of this feature? It sounds like you want something equivalent to this:

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

Where the browser would try each file in succession. The problem with this approach is that it significantly increases the http traffic required and the latency. The best approach is to dynamically construct the page using the correct image tags ahead of time. Using a server-side approach you can try to load the image from the disk (or database or wherever the images are) and dynamically include the best url in the page's image tag.

If you insist on doing it client-side, you can try loading multiple image tags:

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

This will result in a page that appears to have lots of images but they disappear as the page loads. The alt="" is required to make Opera not show the broken image placeholder; the onerror is required for Chrome and IE.

If that's not spiffy enough, and if all your images are the same size, and that size is known, you could stack a bunch of images one on top of the other, so that the first image that loads hides all the others. This worked for me in Opera, FF, and IE8. It loads the last image in the list that exists. Note that this wastes bandwidth and memory because every image is loaded.

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

Finally, there is the JavaScript approach:

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

这篇关于有没有一种方法可以在HTML / JavaScript中指定多个图像源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！