CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen

Wenn wir jedoch das Element <img> mit der Standardquelle (src) verwenden, um den Ladeeffekt durch Scrollen zu erzielen, kann es zu folgendem Erfahrungsproblem kommen: Wenn unser JavaScript langsam lädt, weist unsere Seite wahrscheinlich Flecken mit weißen Bildbereichen auf, reinweiß, ohne jegliche Informationen, und der Benutzer hat keine Ahnung, was der Inhalt ist.
Obwohl das Alt-Attribut beschreibende Informationen liefern kann, werden diese aufgrund schlechter visueller Effekte ausgeblendet. Wir können die Alt-Informationen anzeigen, bevor das Bild geladen wird:

<!DOCTYPE html>
<html lang="de">

    <Kopf>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
        <meta http-equiv="X-UA-kompatibel" content="ie=edge">
        <title>CSS World – Code-Praxis – Präsentation alternativer Bildinformationen</title>
        <Stil>
            /* Scrolling-Ladeeffekt CSS */
            /* img {
                Sichtbarkeit: versteckt;
            }

            img[Quelle] {
                Sichtbarkeit: sichtbar;
            } */

            img {
                Anzeige: Inline-Block;
                Breite: 180px;
                Höhe: 100px;
                /* Alternativtext in Firefox verbergen */
                Farbe: transparent;
                Position: relativ;
                Überlauf: versteckt;
            }

            img:nicht([src]) {
                /* Chrome-Alt-Text und silbernen Rand ausblenden */
                Sichtbarkeit: versteckt;
            }

            img::vor {
                /* Hellblauer Hintergrund */
                Inhalt: "";
                Position: absolut;
                links: 0;
                Breite: 100 %;
                Höhe: 100%;
                Hintergrundfarbe: #f0f3f9;
                Sichtbarkeit: sichtbar;
            }

            img::nach {
                /* Schwarze Alt-Informationsleiste*/
                Inhalt: attr(alt);
                Position: absolut;
                links: 0;
                unten: 0;
                Breite: 100 %;
                Zeilenhöhe: 30px;
                Hintergrundfarbe: rgba(0, 0, 0, .5);
                Farbe: weiß;
                Schriftgröße: 14px;
                transformieren: übersetzenY(100%);
                /* Einige Übergangsanimationseffekte hinzufügen*/
                Übergang: Transformation .2s;
                Sichtbarkeit: sichtbar;
            }


            img:hover::nach {
                transformieren: übersetzenY(0);
            }

        </Stil>
    </Kopf>

    <Text>
        <div style="Breite: 200px;Höhe: 200px;Hintergrund: blanchedalmond;Überlauf: auto;">
            <!-- Scrolling-Ladeeffekt HTML: -->
            <!-- <img> -->
            <img alt="Bild 1" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg">
            <img alt="Schöne Frau meditiert" data-src="1.jpg">
            <img alt="Bild 3" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg">
            <img alt="Meditationsbild" data-src="1.jpg">
        </div>
    </body>
    <Skript>

    </Skript>

</html>

Wirkung der Operation:

Dies ist das Ende dieses Artikels über CSS World – Präsentation von ALT-Bildinformationen in der Code-Praxis. Weitere relevante Inhalte zu CSS-ALT-Bildinformationen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: MySQL verwendet die Partitionsfunktion, um eine horizontale Partitionierungsstrategie zu implementieren

>>: Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung

Beispiel für das Hochladen von Dateien mit Vue unter Verwendung des Formattyps „formData“

CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen

Beispiel für das Hochladen von Dateien mit Vue unter Verwendung des Formattyps „formData“

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Beispiel zur Erhöhung des Swap-Speichers im CentOS7-System

So verwenden Sie Docker zum Bereitstellen von Spring Boot und zum Herstellen einer Verbindung mit Skywalking

Json-String + Cookie + lokaler Speicher in JS

So fügen Sie die Tomcat-Serverkonfiguration zu Eclipse hinzu

So ändern Sie die Systemsprache von CentOS7 in vereinfachtes Chinesisch

Nginx-Konfiguration und -Kompatibilität mit der Codeanalyse der HTTP-Implementierung

Vue Element Front-End-Anwendungsentwicklung Konventionelle Element-Schnittstellenkomponenten

Wie verfolgt Vue Datenänderungen?

Artikel empfehlen

HTML implementiert ein schreibgeschütztes Textfeld und kann den Inhalt nicht ändern

Verwendung des Linux-Befehls sed

Der Unterschied zwischen MySQL-Datenbankhost 127.0.0.1 und localhost

js zur Realisierung des Mausverfolgungsspiels

Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei

2017 neueste Version der Windows-Installation MySQL-Tutorial

Zusammenfassung von über 50 Hilfsfunktionen in JavaScript

Beispiel für horizontale und vertikale Zentrierung eines Div-Unterelements mit CSS

So stellen Sie mit VScode in einer Windows-Umgebung eine Verbindung zur virtuellen MySQL-Maschine her

Einführung in den Löschvorgang von B-Tree

Verwendung und Analyse des Mysql Explain-Befehls

Beispiel für die Verwendung des Supervisors zum Verwalten von Nginx+Tomcat-Containern

Ein kurzer Vortrag über Responsive Design

Legen Sie den Standardtext des Suchfelds fest. Der Standardtext verschwindet, wenn mit der Maus geklickt wird.

Handschriftliche Implementierung von new in JS