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

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

Artikel empfehlen

Detaillierte Erläuterung des CocosCreator-Projektstrukturmechanismus

Inhaltsverzeichnis 1. Projektordnerstruktur 1. As...

Analyse des Prinzips von Nginx + Tomcat zur Erreichung eines Lastausgleichs sowie einer dynamischen und statischen Trennung

1. Implementierungsprinzip des Nginx-Lastausgleic...

Kompilieren Sie CPP-Dateien mit G++ in Ubuntu

Als ich die CPP-Datei zum ersten Mal mit G++ komp...

Beispielcode einer benutzerdefinierten Vue-Komponente zur Implementierung bidirektionaler V-Model-Bindungsdaten

Im Projekt werden Sie auf benutzerdefinierte öffe...

Fähigkeiten zur Seiten-Refaktorierung - Inhalt

Genug des Smalltalks <br />Basierend auf de...

So erweitern Sie Vue Router-Links in Vue 3

Vorwort Das Tag <router-link> ist ein großa...

Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

1. Einleitung Die EXPLAIN-Anweisung liefert Infor...

Spezifische Verwendung des Linux-Man-Befehls

01. Befehlsübersicht Linux bietet ein umfangreich...

Analysieren Sie die Probleme der SQL-Anweisungseffizienzoptimierung beim Lesen, Schreiben, Indizieren und anderen Vorgängen in MySQL-Tabellen

Letztes Mal haben wir über einige SQL-Abfrageopti...

Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue

Wirkung: Ideen: Verwenden Sie das Eingabetypattri...

Ubuntu installiert scrcpy, um die Bildschirmprojektion und -steuerung des Mobiltelefons abzuschließen (eine weitere Möglichkeit, QQ WeChat in Ubuntu zu verwenden).

Scrcpy-Installation snap install scrcpy Installat...

So optimieren Sie den MySQL-Deduplizierungsvorgang maximal

Inhaltsverzeichnis 1. Clevere Verwendung von Indi...

Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows

Der detaillierte Prozess zum Konfigurieren des My...

Überblick und Anwendung von Positionsattributen (absolut|relativ|statisch|fest) in CSS

Schauen wir uns zunächst die Definition des Posit...

So fügen Sie einem Alpine-Image einen Ansible-Dienst hinzu

Verwenden Sie apk add ansible, um den Ansible-Die...