Jak wyświetlić obraz za pomocą JavaScript

JavaScript to dynamiczny język skryptowy używany do dynamicznych efektów na stronach internetowych. Ponadto strony internetowe zawierają obrazy za pomocą znacznika HTML. Czasami strona zajmuje dużo czasu, więc programiści wolą dodawać obrazy za pomocą tagów obrazów JavaScript, które ładują się dynamicznie i zajmują mniej czasu na załadowanie lub wyświetlanie przy każdym kliknięciu.

W tym artykule opisano proces wyświetlania obrazów za pomocą JavaScript.

Jak wyświetlić obraz z JavaScript?

Do wyświetlania obrazów za pomocą JavaScript użyj „createElement ()„Metoda utworzenia węzła elementu HTML. Aby to osiągnąć, wymaga to „img”Jako parametr.

Składnia
Do tworzenia węzła elementu użyj podanej składni:

dokument.UtwórzElement (typ)

Przykład 1: Wyświetl obraz z JavaScript
W tym przykładzie nie ma potrzeby dodawania kodu HTML, ponieważ dodamy obraz za pomocą JavaScript. W tym celu napisz następujący kod w pliku JavaScript:

funkcja displayImage (src, szerokość, wysokość)
var img = dokument.CreateElement („IMG”);
img.src = src;
img.szerokość = szerokość;
img.Wysokość = wysokość;
dokument.ciało.appendChild (IMG);

W powyższym fragmencie kodu:

• Zdefiniuj funkcję „Wyświetlać obraz()”Z źródłem obrazu„src”,„szerokość", I "wysokość”Jako parametr.
• Dodaj znacznik obrazu lub element w JavaScript za pomocą „createElement ()" metoda.
• Ustaw właściwości obrazu, takie jak źródło, szerokość i wysokość obrazu.
• Następnie dodaj obraz do ciała HTML za pomocą „dokument.ciało.appendChild ()" metoda.

Teraz wywołaj funkcję „Wyświetlać obraz()”I przekaż wysokość, szerokość i źródło obrazu jako argument:

DisplayImage („2.jpg ', 320, 250);

Wyjście

W następnym przykładzie sprawdź, jak pokazać obraz na przycisku.

Przykład 2: Wyświetl obraz na przycisku Kliknij za pomocą klasy CSS
Ten przykład dotyczy tego, w jaki sposób można użyć klasy CSS do wyświetlania obrazu w JavaScript i jak pojawi się obraz po kliknięciu przycisku. Najpierw utworzymy przycisk w pliku HTML, który wywołuje „Wyświetlać obraz()”Funkcja po kliknięciu przycisku:

Kliknij

Utwórzmy klasę CSS ”ImageFeatures„Aby ustawić atrybuty obrazu, takie jak„długość", I "szerokość”Obrazu:

.ImageFeatures

Szerokość: 320;
Wysokość: 250;

Zdefiniuj funkcję „Wyświetlać obraz()”Z jednym parametrem SRC. Następnie dodaj element obrazu za pomocą metody CreateElement () i ustaw źródło obrazu. Teraz dodaj klasę „ImageFeatures”Do ustawienia atrybutów obrazu za pomocą„Lista klas.dodać()" metoda. Na koniec dołącz znacznik obrazu do dokumentu za pomocą „dokument.ciało.appendChild ()" metoda:

funkcja displayImage (src)
var img = dokument.CreateElement („IMG”);
img.src = src;
img.Lista klas.add („imageFeatures”);
dokument.ciało.appendChild (IMG);

Jak widać, obraz jest wyświetlany na przycisku kliknij bez żadnego opóźnienia:

Wyświetliliśmy obraz za pomocą JavaScript.

Wniosek

Aby wyświetlić obraz z JavaScript, użyj „createElement ()„Metoda tworzenia znacznika obrazu. Mówiąc dokładniej, metoda CreateElement () służy do utworzenia węzła elementu. W tym artykule opisaliśmy proces wyświetlania obrazów za pomocą JavaScript.