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

7 回复 | 直到 15 年前

1

5

Mr. Shiny and New å®å® 15 年前

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

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

如果您坚持在客户端执行此操作,可以尝试加载多个图像标记:

<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不显示损坏的图像占位符;这个 onerror Chrome和IE都需要。

如果这还不够漂亮,并且如果所有图像的大小相同,并且已知该大小,则可以将一组图像一个叠在另一个上,以便加载的第一个图像隐藏所有其他图像。这在歌剧院、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>

2

3

Joey Gumbo 15 年前

如果我正确阅读了规范,您应该能够使用 HTML object element . <object> 标记可以嵌套,从而提供一个资源链,每个资源依次尝试呈现,失败后,用户代理继续呈现下一个。

不过,请注意,对于一些浏览器和版本来说,这种行为是有缺陷的。

3

sekmo 8 年前

如果您试图根据分辨率为图像标记设置多个源,则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">

4

1

jldupont 15 年前

换句话说,您不能拥有一个元素(例如img)并指定多个URL来“尝试”。

当然,您可以在服务器端手工制作一些东西:一个对资源X的请求进入服务器,服务器有一个“工作”的URL列表。

5

1

Alex Mcp 15 年前

INAJNBAM(我无论如何都不是Javascript忍者),但是伪码 ,可能在加载页面后尝试类似的操作:(或者,现在我想起来了,这也适用于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总是想要它们,我只是不知道把它们放在哪里。

6

1

StarScream 15 年前

若说“工作”是指可以加载图像,那个么您可以在jQuery的图像(在您的例子中是一组图像)上使用“加载”函数,并在其内部声明一旦图像加载完成将触发的功能。

如果说“works”意味着HTTP状态代码是ok的,那么使用jquery使用ajax调用。

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

7

0

rohancragg 15 年前

您可以输入某个服务器端应用程序/脚本的URL,该应用程序/脚本提供来自任何图像源的图像。

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

除了ASP.Net之外,还有许多其他服务器端选项,如Perl、PHP。。。