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

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

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

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

Proxy realisiert das Prinzip der bidirektionalen Bindung von Vue3-Daten

So verwenden Sie vue3+TypeScript+vue-router

Erfahren Sie, wie Sie Vue3 Reactivity implementieren

Fallerklärung für den Nginx-Reverse-Proxy zu Go-FastDFS

Vue implementiert die Produktregisterkarte der Produktdetailseitenfunktion

Eine kurze Erläuterung der Rolle des Parameters docker --privileged=true

Zusammenfassung der Updates und gefundenen Probleme des Docker Consul-Containerdienstes

CSS Acht auffällige HOVER-Effekt-Beispielcodes

Detaillierte Erklärung zur Verwendung des at-Befehls für einmalig geplante Aufgaben in Linux

Artikel empfehlen

Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage

Beispielcode zum Bereitstellen von ELK mit Docker-Compose

Ausführliche Erläuterung zum Beispiel der MySQL InnoDB-Tablespace-Verschlüsselung

Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript

Beispielanalyse für MySQL-Transaktionen, Isolationsebenen und Sperrenverwendung

Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates

Methode zur Optimierung von MySQL-Gruppenabfragen

JavaScript – Verwenden von Slots in Vue: Slot

So simulieren Sie Netzwerkpaketverlust und -verzögerung in Linux

Das WeChat-Applet implementiert das Scrollen von Text

Die neueste Version der MySQL5.7.19-Dekomprimierungsversion Installationshandbuch

Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben

Rendering-Funktion und JSX-Details

Warum wirkt sich die Verwendung von Limits in MySQL auf die Leistung aus?

Drei Möglichkeiten zum Weiterleiten des Linux-SSH-Ports