Display the preload.gif before the image finishes loading

Question

Display the preload.gif before the image finishes loading

I have a collection of images in a gallery and I want to assign a class name to all image tags, so that before they finish loading they show a preload.gif. Once the image finishes loading, it should display the actual image. I attempted to achieve this using the following code:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        alert("Image loaded: " + document.getElementsById("myImg").complete);
      }
    </script>
  </head>
  <body onload="myFunction()">
    <p>This property returns true if the image is finished loading, and false if not.</p>
    <img class="myImg" src="compman.gif" alt="Computerman" width="107" height="98">
  </body>
</html>

This code only supports the use of id names, but I would like to assign a class name to all image tags instead.

javascript jquery html css

Answer 1

Answer №1

After experimenting with various methods, I finally found a solution that worked perfectly for me.

Initially, I displayed the loading gif as the image placeholder. Once the gif loads, a function is triggered to load the actual image. When the image is fully loaded, the function updates the source of the original image based on the provided parameters.

Here is the JavaScript code:

function loadimage(imgsrc, change){
  var loadimage = new Image();
  loadimage.onload = changesrc(imgsrc, change);
  loadimage.src = imgsrc;
}

function changesrc(imgsrc, change) {
  change.src=imgsrc;
}

For the HTML part (the linked photo is large to ensure loading indication):

<img onload="loadimage('http://upload.wikimedia.org/wikipedia/commons/4/49/Swiss_Jungfrau_mountains.jpg',this);" src="http://jimpunk.net/Loading/wp-content/uploads/loading2.gif">

This approach allows you to keep the original image source in the img tag itself, making it convenient and organized.

Answer 2

After experimenting with various methods, I finally found a solution that worked perfectly for me.

Initially, I displayed the loading gif as the image placeholder. Once the gif loads, a function is triggered to load the actual image. When the image is fully loaded, the function updates the source of the original image based on the provided parameters.

Here is the JavaScript code:

function loadimage(imgsrc, change){
  var loadimage = new Image();
  loadimage.onload = changesrc(imgsrc, change);
  loadimage.src = imgsrc;
}

function changesrc(imgsrc, change) {
  change.src=imgsrc;
}

For the HTML part (the linked photo is large to ensure loading indication):

<img onload="loadimage('http://upload.wikimedia.org/wikipedia/commons/4/49/Swiss_Jungfrau_mountains.jpg',this);" src="http://jimpunk.net/Loading/wp-content/uploads/loading2.gif">

This approach allows you to keep the original image source in the img tag itself, making it convenient and organized.

Answer 3

Answer №2

To add a loading spinner to your images, you can use the loading.gif as a background-image in your CSS class. Make sure to preload it or convert it to a base64 data-uri. This will display the loading spinner first before the actual image loads via its source.

<img class="gal" src="[your image URL]" />

.gal {
    width: 170px;
    height: 104px;
    background-image: url([your loading.gif])
}

See the demo here: http://jsfiddle.net/ygalanter/bv3Hd/2/

(Please remember to clear your browser cache if you want to re-run the demo).

Answer 4

To add a loading spinner to your images, you can use the loading.gif as a background-image in your CSS class. Make sure to preload it or convert it to a base64 data-uri. This will display the loading spinner first before the actual image loads via its source.

<img class="gal" src="[your image URL]" />

.gal {
    width: 170px;
    height: 104px;
    background-image: url([your loading.gif])
}

See the demo here: http://jsfiddle.net/ygalanter/bv3Hd/2/

(Please remember to clear your browser cache if you want to re-run the demo).

Display the preload.gif before the image finishes loading

Answer №1

Answer №2

Similar questions

When I implement JavaScript on my website, my HTML content does not show up

Change the text field's border color if the field is not empty

Stopping a function that is currently running on a website using Javascript

Resizing Navigation Bar in WordPress Theme WP Clarion

Tips for effectively integrating data from MongoDB into a React application

I had hoped for the search results to be displayed in neat columns, but unfortunately only the text is formatted that

Tips for automatically displaying the scroll bar continuously on iOS 15 without requiring user interaction

Displaying a message text upon successful AJAX request

Nextjs: issue with updating state within an interval is not functioning

What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is it possible to pass multiple functions to the parent component in ReactJs if using OnChange() as a prop?

Element Proxy

Using Javascript within HTML: A guide on when to utilize semi-colons and when to implement the return false statement

Displaying a PHP variable on the console through the power of jQuery and AJAX

What is the best way to remove column and row gaps in a Bootstrap grid system?

What is the best way to integrate asynchronous computed observable with several concurrent $.ajax requests?

Creating a website using the Hugo Tikva theme and Bootstrap-4 for a seamless and modern design

I attempted to pull information from the database and display it in my checkboxes. However, I encountered an issue where I am unable to save the selected checkboxes back to the database

Using the .load() function to import an HTML file from the directory above

There seems to be a glitch in the AJAX code