个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 17:28:50 25 4
gpt4 key购买 nike

有没有办法告诉浏览器查看图像 URL 列表，直到找到一个有效的 URL？纯 HTML 是首选，但我猜这里可能需要 JavaScript(我已经在使用 JQuery，所以这不是问题)。

编辑:感谢您的回答!我将添加一些说明:

  • “作品”是指可以显示图像。
  • 我特别想在客户端执行此操作。

    • 最佳答案

    这对我来说似乎是个坏主意。此功能的目的是什么？听起来您想要与此等效的东西:

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

    如果这还不够漂亮，并且如果所有图像的大小都相同，并且该大小是已知的，那么您可以将一堆图像一个一个叠放在另一个之上，以便加载的第一个图像隐藏所有其他图像。这在 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>

    关于html - 有没有办法在 HTML/JavaScript 中指定多个图像源？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1630451/

    25 4 0
    文章推荐： asp.net-mvc - Asp.Net MVC 路由 - 如何匹配整个 URL？
    文章推荐： ExtJS 面板方向 - 从右到左
    文章推荐： directwrite - 如何在 DirectWrite 中呈现混​​合颜色的文本？
    文章推荐： database-design - 多对多关系
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com