DEMO: Loading images with native JavaScript and handling of events for showing loading spinners

Loading images with native JavaScript and handling of events for showing loading spinners

In my other tutorial I described how to load images with jQuery. Sometimes you might need to implement a similar functionality, but without jQuery. This tutorial tells you how to load images with plain old, native JavaScript and how to handle events in order to show and hide loading spinners. I thought I should post my approach to prevent you from «re-inventing the wheel» again and again like it is (unfortunately) done every day in projects worldwide. «Re-inventing the wheel» is waste in most cases, and to me waste should be treated like crime — nobody wants crime! You can use this code in your own projects, but make sure not to forget the attribution.

I have implemented two examples of how to use the loadImage(. ) API (see below). The listeners are used to show a loading spinner and to hide it (sometimes referred to as «loading icon» or «busy indicator»). For the overlay functionality I use basic CSS and HTML. However, the loading spinners I display and hide via callback functions work on Chrome, Safari, Firefox and IE9+, IE 7/8 or lower is not supported because I am using rgba in my CSS (I did not check other browsers). But there is also an easy way to display the loading spinner in a cross browser enabled way. To demonstrate this I have also added a separate example, please check the code below for details. The examples should be self explanatory. You could even extend the API the way you want, i.e. allowing to pass an already existing image element or just the id of that image element (I did not add this to the API to keep it simple).

The basic idea behind the scenes of the loadImage() API is:

• Use the JavaScript Image object
• Listen for the beforeLoad event to display the loading spinner
• Listen for the complete event to remove the loading spinner
• Listen for the load event to display the loaded image
• Listen for the error event to display a simple error message
• Trigger load in case the image is loaded from the cache

Please do not get confused about the wording I have used here. I wrote this tutorial down to make it accessible for everybody because I know there are many people out there struggling with the best way to load images with JavaScript. There are many ways to implement the event handlers and performance improvements of the handlers are possible. Although maybe not relevant for this tutorial, if you want to learn what browser reflow is then visit this. By the way: don’t forget to leave me a comment or donation if you like this tutorial.

Are you looking for a solution that uses jQuery? This is covered in my other tutorial: Loading images with jQuery and handling of events for showing loading spinners

Enough words, here is the full code of how you can load images with jQuery:

        
DEMO: Loading images with native JavaScript and handling of events for showing loading spinners
 
1. Calling the API for a single image URL
 
 Load Image 
 
 
2. Passing data to callback functions (Static URLs used)
 
 
3. Static Example: Cross Browser Loading Spinner
 
 
    

Have a look at the Demo to see this example in action. Hint: Only the image at the top is loaded from the url derived from the input field.

Источник

How to show images with a click in JavaScript using HTML?

Showing images with a click in JavaScript is a common technique used in web development to create image galleries, slideshows, and other types of image−based applications. It allows users to navigate between images by clicking on buttons or other elements in the user interface, rather than using a static set of images that are always visible.

To show images with a click in JavaScript, you can use a combination of HTML, CSS, and JavaScript to define the structure and appearance of the image elements, and to specify the behavior of the buttons or other elements that will be used to navigate between the images.

In HTML, you can use the img element to define the image elements, and the style attribute to specify the CSS styles that will be applied to the images. You can also use the src attribute to specify the source of the images, and the alt attribute to provide a text alternative for users who cannot see the images.

In CSS, you can use the display property and a class name to hide and show the images as needed.

In JavaScript, you can use the querySelectorAll method to select the image elements, and the addEventListener method to attach click event listeners to the button or navigation elements. In the event listener functions, you can use the classList property of the image elements to add and remove the class that controls their visibility, and you can use a loop or an array of image elements to iterate over the images and update their class names as needed.

Approach 1: Using the Style Display Property

To show images with a click in JavaScript using HTML, you can use the display property of the style object to hide and show the images as needed.

Syntax

Following is the syntax to display images using the display property in JavvaScript −

myImage.style.display = "block";

Here «display» property of myImage is set to «block«.

Steps

Here are the steps you can follow to show an image with a click in JavaScript using HTML −

• Step 1 − Create an HTML file with a button element and an image element.
• Step 2 − In the image element, use the style attribute to set the display property to «none». This will hide the image by default.
• Step 3 − In the JavaScript code, use the getElementById method to select the button and image elements.
• Step 4 − Use the addEventListener method to attach a click event listener to the button element.
• Step 5 − In the event listener function, use the style.display property of the image element to change its value from «none» to «block». This will make the image visible.

By following these steps, you can create a simple image gallery or slideshow that allows users to show and hide images by clicking on a button or other element in the user interface

Example

Here’s an example of how you might do this:

     
Showing image with a click in JavaScript
 Show Image      

In this example, the HTML file defines a button and an image. The image is initially hidden by setting the display property of the style object to «none». The JavaScript code uses the addEventListener method to attach a click event listener to the button, and the event listener function shows the image by setting the display property to «block». When the button is clicked, the image will be displayed.

You can customize this behavior as needed depending on your specific requirements. For example, you might want to show multiple images or toggle the visibility of the image when the button is clicked. You can also use other methods to show and hide the image, such as using the visibility property or adding and removing a class that applies the appropriate styling.

Approach 2: Using the classList.toggle Method

This approach allows you to use CSS classes to control the visibility of the image, which can be useful if you want to apply other styles or animations to the image when it is shown or hidden. You can customize the behavior as needed by adding or modifying the CSS classes and by adjusting the logic in the event listener function.

Syntax

Following is the syntax to use classList.toggle method to show image with aclick in JavaScript −

myImage.classList.toggle("visible");

Here myImage is set to visible.

Example

In the example below, we show images with a click using classList.toggle mwthod in JavaScript −

     
Showing image with a click in JavaScript
 Show Image  .hidden < display: none; >.visible    

In this example, the HTML file defines a button and an image, and the image is initially hidden using a CSS class called hidden. The JavaScript code uses the addEventListener method to attach a click event listener to the button, and the event listener function toggles the visibility of the image by using the classList.toggle method to add or remove the visible class. When the button is clicked, the visible class will be added to the image, causing it to be displayed. If the button is clicked again, the visible class will be removed, causing the image to be hidden again.

Approach 3: Using Hidden Attribute

This approach is simple and easy to use, and it allows you to control the visibility of the image using a standard HTML attribute. You can customize the behavior as needed by adjusting the logic in the event listener function.

Syntax

Following is the syntax to show an image using hidden attribute:

myImage.hidden = !myImage.hidden;

Here the hidden attribute of myImage is set to true.

Example

In this example we show image with a click using hidden attribute of the image in JavaScript −

     
Showing image with a click in JavaScript
 Show Image      

In this example, the HTML file defines a button and an image, and the image is initially hidden using the hidden attribute. The JavaScript code uses the addEventListener method to attach a click event listener to the button, and the event listener function toggles the visibility of the image by using the hidden attribute to show or hide the image. When the button is clicked, the hidden attribute will be set to false, causing the image to be displayed. If the button is clicked again, the hidden attribute will be set to true, causing the image to be hidden again.

Note that the hidden attribute is supported in modern browsers, but it may not be supported in older browsers. If you need to support older browsers, you might want to use one of the other approaches that I mentioned earlier, such as using the style.display property or CSS classes.

Источник