ausblenden alt-tag im firefox

Gemäß dem Standardverhalten alt - Attribut gerendert, das erste mal kurz vor der Bild-rendering. Ich bin die Anzeige von 25 Bilder in einem raster so sieht es etwas peinlich, wie alle alt Attribute werden zuerst angezeigt.

Ist es möglich, sich zu verstecken alt Attribute in Firefox?

Hinweis: alt Attribute enthalten dynamische Namen in meinem Fall.

  • FWIW, Chrom-und Edge-auf diese Weise funktionieren (beide zeigen nicht alt text beim laden des Bildes). Also legte ich bugzilla.mozilla.org/show_bug.cgi?id=1472637 für den Firefox, damit es hoffentlich verhält in der Zukunft.
InformationsquelleAutor neeraj | 2012-10-01
  1. 13

    Den Weg, um zu verhindern, dass alt Attributwerte angezeigt wird, ist das Attribut zu entfernen.

    Sinne einer alt - Attribut (nicht markiert) ist, dass es gibt eine alternative, einen Ersatz für das Bild, in Situationen, in denen das Bild nicht angezeigt. Also, wenn Sie wollen, es zu verbergen, wenn das Bild noch nicht geladen wurde, werden Sie gefragt, für Verhalten, das widerspricht dem Sinn des Attributs.

    Können Sie jedoch machen die alt text unsichtbar (mit den üblichen CSS-Caveats) auf Firefox per Einstellung z.B.

    img { background: white; color: white; }

    in CSS. Dies impliziert, dass die alt Texte unsichtbar sind, auch wenn der browser bekommt nie das Bild, oder der browser wurde so konfiguriert, um die Bilder anzuzeigen.

    InformationsquelleAutor Jukka K. Korpela
  2. 17

    Nach dem Versuch alle anderen Methoden hier, ich fand diese Methode funktioniert am besten, das macht den text, transparent, bis das Bild geladen:

    .yourClass img {
    color: transparent;
}
    InformationsquelleAutor user unknown
  3. 3

    Aus der Referenz von allen der oben genannten Antworten, ich dachte mir, am besten ist die Verwendung von 

    img:-moz-loading {
  visibility: hidden;
}

    Nehme an, es ist kein Bild, und wir verwenden Farbe als weiß oder transparent, dann alt-Attribut nicht mehr verwenden, so müssen wir dieses Attribut, wenn es ist kein Bild zu zeigen, welches Bild hier zu laden und zu zeigen, alternativen text anzeigen.

    InformationsquelleAutor Vikram
  4. 1

    Neben der Einstellung:

    img { 
  background: white; 
  color: white;
}

    Ich gerne deaktivieren Firefox die Standard-Bild-Verhalten sowie:

    img:-moz-loading {
  visibility: hidden;
}
    InformationsquelleAutor Justin Tanner
  5. 0

    Konnte Sie den dynamischen Namen in der Titel - Attribut?
    Sie könnten versuchen, ein schwarzer hintergrund oder schwarzen hintergrund Bild; vielleicht Firefox verwendet immer noch eine schwarze Textfarbe.
    Vielleicht img { color: white; } tun würde?

    • Ich platziert haben dynamische Namen im alt-tag sowie title. Ich habe auch versucht, die Platzierung Farbe:weiß als inline-Stil für die Bilder, aber es hat nicht funktioniert. Ich bin mit wordpress wp-plugin-Typen und nach Anwendung inline-Stil, nicht auch nur ein einziges Bild gerendert.
    InformationsquelleAutor Joop Eggen
  6. 0

    Wenn Euch das nichts ausmacht das hinzufügen von ein wenig extra, hier ist es:

    <img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />

    Hoffe, das hilft... :))

    • Ich mich verstecken muss das bestehende alt-tags, nicht ersetzen Sie es mit etwas anderes, das Sie beschrieben haben, in Ihrem Beispiel.
    InformationsquelleAutor peter.aryanto
  7. 0

    Anstatt sich Gedanken über die alt-Funktion, können Sie geben alle Ihre Bilder eine gemeinsame Klasse, sagen image-to-show und erstellen Sie einen be-div absolut positioniert über dieses Bild. Also, wenn die Seite lädt, Sie zeigen nur die be-div, mit einem laden von gif -, so etwas wie dieses:

    //show loading image
$('.loader').show();

    Wenn das Bild geladen ist, können Sie blendet die div-und zeigen das Bild.

    //main image loaded ?
$('.image-to-show').load(function(){
  //hide/remove the loading image
  $('.loader').hide();
});

    Können Sie weiter zu verbessern, diesen code mit Hilfe von bestimmten Bild-ID. Eine andere, sauberere Weg, es zu tun wäre, um data-loading auf true für die Bilder, die geladen werden, und sobald die Bilder geladen sind, legen Sie $('.image-to-show').data('loading', false)

    Es gibt mehrere Möglichkeiten der Bekämpfung dieser, lassen Sie mich wissen, wenn Sie weitere Erklärungen benötigen.

    • Leider kann ich dies nicht, weil Bilder, die gerendert werden durch ein plugin (WordPress). Also ich kann keine änderungen in den core Dateien des plugins. Ich bin auf der Suche nach einer Lösung, nur um zu verbergen, alt-tag.
    • Gut, der beste Teil über die Arbeit mit einem CMS wie wordpress ist, dass Sie die Flexibilität haben, code ändern, wie Sie es wollen zu arbeiten. Jedenfalls, das plugin erstellen würde etwas den markup-Code für Ihre Bilder. Holen Sie sich die ID oder die Klasse für die Bilder als Selektor, Holen Sie sich die alt Attribut in eine variable, wischen Sie es sauber und auf image laden schreiben Sie es wieder in die DOM. Hässlich, aber funktional 😀
    InformationsquelleAutor automaticAllDramatic
  8. -1

    Ich würde anfangen, durch hinzufügen dieser CSS, das wird ausblenden alle Bilder mit alt-text (nicht display: none weil wir rückgängig machen wollen, und wir wissen nicht, was "rückgängig machen"):

    img[alt] {
    width: 0;
    height: 0;
}

    Und dann zeigt, wenn es alle geladen (dieses jQuery verwendet):

    $(document).ready(function() {
    $('img[alt]').on('load', function() {
        this.style.width = 'auto';
        this.style.height = 'auto';
    });
});
    InformationsquelleAutor Evan Hahn
Schreibe einen Kommentar