Bild einblenden mit JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Bild einblenden mit JavaScript
Anika Tabassum Era 15 Februar 2024
JavaScript JavaScript Image
  1. Verwenden Sie die Eigenschaft className, um das Bild einzublenden
  2. Verwenden Sie die Methode requestAnimationFrame(), um das Bild einzublenden
Bild einblenden mit JavaScript

Ohne JavaScript kann der Einblendstil eines Bildes mit CSS ausgewertet werden. Aber der Prozess ist nicht zuverlässig, da wir das nicht dynamisch handhaben können.

Die JavaScript-Methode, mit der Methode requestAnimationFrame() herumzuspielen, anstatt vollständig von CSS und der Methode setTimeout() abzuhängen, macht den Pfad schneller und prompter. Im Beispielsegment sehen wir eine Codeinstanz, die die Implementierung der Methode requestAnimationFrame() enthält und einen Code, der Bilder einblenden kann, die auf die Eigenschaft className verweisen.

Verwenden Sie die Eigenschaft className, um das Bild einzublenden

Wir werden ein img-Tag mit einem brauchbaren src generieren. Ein anklickbares Ereignis ist vorhanden, um das Einblenden des Bildes zu initiieren. Die Hauptarbeit hier ist mit der Eigenschaft className, die auf einen bestimmten CSS-Block verweist und diesen mit der Instanz img id ausrichtet.

Code - HTML-Datei:

<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>

Code - CSS-Datei:

img {
            opacity: 0;
            filter: alpha(opacity=40);
    }
.animation {
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            opacity: 1;
        }

Code - JavaScript-Datei:

function myFunction() {
  document.getElementById('img').className = 'animation';
}

Ausgabe:

Verwenden Sie die Eigenschaft className, um das Bild einzublenden

Verwenden Sie die Methode requestAnimationFrame(), um das Bild einzublenden

In diesem Zusammenhang haben wir eine Funktion fadeIn, die die Instanz des img-Tags übernimmt. Später operiert die fadeIn-Funktion auf requestAnimationFrame() und setTimeout(), und ein Zeitrahmen wird basierend auf den aktuellen Browserdetails lokalisiert.

Code - HTML-Datei:

<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>

Code - CSS-Datei:

img {
    opacity: 0;
    filter: alpha(opacity=40);
}

Code - JavaScript-Datei:

function fadeIn(el) {
  el.style.opacity = 0;
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    if (+el.style.opacity < 1) {
      var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
          setTimeout(tick, 16)
    }
  };
  tick();
}

function myFunction() {
  var el = document.getElementById('what');
  console.log(el);
  fadeIn(el);
}

Ausgabe:

Verwenden Sie die Methode requestAnimationFrame(), um das Bild einzublenden

Autor: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Verwandter Artikel - JavaScript Image