Gibt es eine Möglichkeit zu benennen, die mehrere Bild-Quellen in HTML/JavaScript?

Gibt es eine Möglichkeit um dem browser mitzuteilen, Blick nach unten, eine Liste der Bild-URLs, bis er eine findet, die funktioniert? Reines HTML wäre bevorzugt, aber ich nehme an, JavaScript ist wohl notwendig, hier (ich bin schon mit JQuery, also ist es nicht ein Problem ist).

EDIT: vielen Dank für Eure Antworten! Ich werde noch ein paar Klarstellungen:

Von "Werk", ich meine das Bild kann angezeigt werden.
Ich möchte speziell zu diesem Zweck auf der client-Seite.

Definieren Sie "funktioniert".
Nein, aber ja, ein JavaScript / JQuery-Lösung ist es möglich, eine server-side-Lösung ist eine weitere option.
Ich denke, dieser link kann helfen, Ihr problem stackoverflow.com/a/9891041/2301588

InformationsquelleAutor Imagist | 2009-10-27

html image

Dies scheint wie eine schlechte Idee zu mir. Was ist der Zweck dieser Funktion? Es klingt wie Sie etwas wollen, entspricht dies:

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

Wo der browser würde versuchen, jede Datei nacheinander. Das problem bei diesem Ansatz ist, dass es erhöht deutlich die http-Datenverkehr benötigt und die Latenzzeit. Der beste Ansatz ist, um dynamisch zu konstruieren, die Seite mit dem richtigen image-tags vor der Zeit. Mit einem server-side-Ansatz können Sie versuchen, laden Sie das Bild von der Festplatte (oder der Datenbank oder wo die Bilder sind) und dynamisch die am besten die url in der Seite ist ein Bild-tag.

Wenn Sie darauf bestehen, Sie tun es auf client-Seite, können Sie versuchen, laden mehrere Bild-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'">

Ist das Ergebnis eine Seite, die angezeigt wird, haben sehr viele Bilder, aber Sie verschwinden, sobald die Seite geladen wird. Die alt="" ist erforderlich, um eine Oper nicht zeigen das gebrochene Bild-Platzhalter; die onerror ist erforderlich für Chrome und IE.

Wenn das nicht schick genug, und wenn alle Bilder die gleiche Größe, und diese Größe bekannt ist, könnten Sie stapeln ein paar Bilder, eines auf der Oberseite des anderen, so dass das erste Bild geladen, blendet alle anderen. Dieser arbeitete für mich in Opera, FF und IE8. Er lädt das Letzte Bild in der Liste existiert. Beachten Sie, dass dies verschwendet Bandbreite und Speicher, weil jedes Bild, das geladen wird.

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

Schließlich gibt es die JavaScript-Ansatz:

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

Die javascript-Lösung, entsteht eine unendliche Schleife, wenn keine Bilder vorhanden sind. Sie müssen hinzufügen if (index >= images.length) return; als die erste Zeile der load_img(..) Funktion.

InformationsquelleAutor Mr. Shiny and New 安宇

3

Wenn ich bin das Lesen der Spezifikation korrekt ist, sollten Sie in der Lage sein, dies zu tun mit der HTML object - element. <object> - tags können verschachtelt werden und bieten damit eine Kette von Ressourcen versucht jeder der Reihe nach dargestellt werden und bei einem Ausfall der user-agent wird mit der nächsten.

Beachten Sie jedoch, dass dieses Verhalten ist/war buggy für verschiedene Browser und Versionen.

Ja, leider ist es immer noch nicht wirklich brauchbar, Dank arm-Unterstützung in aktuellen IE-Versionen. +1 für die Art, wie es war soll aber getan werden.
Nach msdn.microsoft.com/en-us/library/cc304133%28VS.85%29.aspx es funktioniert ab IE 7, obwohl der DOM war defekt, dann zurück. MS behauptet, es ist voll unterstützt in IE-8, einschließlich DOM die Barrierefreiheit für Behinderte verschachtelte Objekte.

InformationsquelleAutor Joey
2

Wenn Sie versuchen, die Einstellung mehrerer Quellen der image-tag je nach Auflösung srcset ist der paramenter, die Sie suchen.
```
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x,
images/space-needle-hd.jpg 3x">
```
InformationsquelleAutor sekmo
1

Vorausgesetzt, du meinst den browser abrufen zu können, einige Inhalte mit einer HTTP-Antwort-code 200 für eine bestimmte URL, dann ist die Antwort : KEINE von der client-Seite nur HTML zu verwenden.

In anderen Worten, Sie können nicht über ein element (z.B. img) und geben Sie mehrere URLs zu "versuchen".

Natürlich kann man was basteln auf der server Seite: eine Anforderung für die Ressource X und der server hat eine Liste von URLs, die "Arbeit".

InformationsquelleAutor jldupont
1

INAJNBAM (ich bin kein Javascript-Ninja mit allen Mitteln), aber in pseudo-code, vielleicht versuchen Sie so etwas wie dieses, nachdem die Seite geladen hat: (ODER, wie jetzt, dass ich daran denke, das würde funktionieren gut mit PHP auch)
```
$images = array('img1.jpg', 'img2.jpg', 'img3.png'....)
    foreach $images as $img
        {if $img.height > 0px
            {print "<img src="$img" />"
            end}
        };;;;
```
In der Tat PHP wäre sogar besser, weil ich vermute, in JS dies hätte zur Folge, blinkende Bilder auf dem Bildschirm am Ende der pageload. Probieren Sie es aus in PHP und sehen, wenn etwas wie dies passt Ihre Rechnung.

HINWEIS: ich Hinzugefügt 4 semi Doppelpunkte am Ende. Ich weiß, Javascript will immer 'em, ich wusste nur nicht, wo Sie bleiben.

InformationsquelleAutor Alex Mcp
1

Wenn mit den Worten "arbeitet" Sie meinen das Bild geladen werden kann, können Sie die "load" - Funktion auf ein Bild( in deinem Fall ein paar Bilder) von jQuery und darin erklären die Funktionen werden ausgelöst, sobald das laden des Bildes ist abgeschlossen.

Wenn mit den Worten "arbeitet" Sie bedeuten, dass die HTTP-status-code ok ist, dann verwenden Sie einen ajax-Aufruf mit jquery.
```
function getUrlStatus(url) {
     $.ajax({
         url: url,
         complete: function(xhr) {
             return xhr.status;
         }
     });
 }
```
InformationsquelleAutor StarScream
0

Könnten Sie den URL eines server-side Anwendung/Skript, dient das image von was auch immer Bild-Quelle, die es finden kann.

Könnten Sie tun dies in ASP.Net mit einem HTTPHandler, der sendet eine Antwort der content-type=image/jpg.

Andere als ASP.Net es gibt amny anderen server-Seite Optionen wie Perl, PHP...

InformationsquelleAutor rohancragg

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.