Delete the class once the image has finished loading

Is there a simple way to use JavaScript to implement Bootstrap 5 placeholders for lazy loading each image I load?

Bootstrap 5 provides a placeholder class that displays a "loading card" while an image is loading. I want to utilize this class until each image finishes loading, at which point the loading card should disappear. It's worth noting that I will be loading multiple images, so the loading card should disappear independently for each image.

I haven't been able to find much information on forums, so I'm reaching out for help here.

Check out the Bootstrap component here.

javascriptlazy-loadingbootstrap-5lazy-evaluation

Answer №1

The <img> element does not seem to have an "onloaded" event. Here is a function that can be utilized in Javascript to load the image source and remove the placeholder class upon completion.

async function loadImage(image) {
  image.src = URL.createObjectURL(await (await fetch(image.getAttribute("xsrc"))).blob());
  image.classList.remove("placeholder");
}
.placeholder { border: solid 5px black; }
<body onload="loadImage(document.querySelector('img'))">
  <img width="100" height="100" class="placeholder" xsrc="https://lh3.googleusercontent.com/a-/AOh14Gjy1a31kVAiCn_hJAWq34vNkEHuXwBWbuL00Eakf4g=k-s48"/>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

javascripthtmlcss

Is there a way to retrieve input from a bootstrap switch using Jinja2 for WTForms?

<form> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"> <label class="form-check-label" for ...

validationflaskjinja2bootstrap-5flask-wtforms

What is preventing my Button's onClick() method from being effective?

Below is a snippet of my HTML layout using the sciter framework: <div id="volume_micphone_slider" style="z-index:1;"> <input id="volume_slider" class="volume_slider" type="vslider" name="p1c" max="100" value="20" buddy="p1c-buddy" /> < ...

javascripthtml

The behavior of AngularJS checkbox and ng-change is definitely puzzling

I am facing an issue with my array structure: { key : 'abc', color: 'Red', show: true } <div ng-repeat="x in myArray"> <input type="checkbox" ng-model="x" ng-change="changeShow($index)" checked="checked" /> ...

javascriptangularjs

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Sending form data without interrupting the user interface by using asynchronous submission

Using jQuery version 1.7.2, I am currently using the submit() method to send a form via POST. This triggers a Python cgi-bin script that performs some tasks which may take around ten seconds to finish. Upon completion of the task, the Python script instruc ...

javascriptjqueryajaxforms

Retrieve the script's location from the server prior to the initialization of Angular

Is there a way to dynamically add a script in the index.html page based on the application version? I have a controller that retrieves the app version and attempted to achieve this using AngularJS: var resourceLoader = angular.module('MyTabs&apo ...

javascriptangularjs

Avoid automatic scrolling when moving between tabs with varying lengths in Bootstrap Tabs

I am working with a series of Bootstrap tabs that contain content of various lengths: <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data ...

htmltabsbootstrap-5

Is there a way to redirect the user to a different page without refreshing the page during navigation?

Utilizing javascript, ajax, and jquery to dynamically load content from PHP files without refreshing the page has been a successful venture. However, I am facing a challenge in creating a hyperlink within one of the loaded contents that redirects the user ...

javascriptphpjqueryhtmlajax

Exploring the functionality of Next.js with Links and routes

Currently, I am facing an issue with the popover menu in my header that displays products. The problem arises when I click on a product in the list; it navigates correctly to the path "products/some-product" regardless of the selected item. However, if I a ...

javascriptnext.js

Retrieve items within an array of objects in MongoDB using an array of IDs (using the $in operator in aggregation)

In my MongoDB database, I have a collection of stores [ { "_id" : ObjectId("6043adb043707c034d5363b7"), "shopId" : "shopid1", "appId" : "777", "shopItems" : [ { ...

javascriptnode.jsmongodbmongoose

Error Occurred while Uploading Images using Ajax HTML Editor with JSON Data

I am facing an issue with my AJAX HtmlEditorExtender, specifically when trying to upload an image. The error message I receive is as follows: JavaScript runtime error: Sys.ArgumentException: Cannot de-serialize. The data does not correspond to valid JSON. ...

c#javascriptajaxjson

Exploring the power of Foundation For Apps and Angular by seamlessly displaying dynamic data sourced from

I'm currently working with Foundation for Apps, a framework that incorporates elements of AngularJS. My goal is to display the content from a local JSON file by accessing it through a controller and rendering the results as 'cards'. Addition ...

javascriptjsonangularjscontrollerzurb-foundation

Navigating with ASP.NET 5 Routing and AngularJS Routing

Currently, I am working on an ASP.NET 5 application which also utilizes AngularJS for the front-end. The basic client-side HTML routing support offered by Angular has been successfully implemented in my project. In the Startup class, the default routing is ...

javascriptasp.netangularjsasp.net-mvc

Retrieving information from an ajax array in PHP

I am currently attempting to retrieve an array of data using AJAX on the PHP side, but I am facing difficulties in accessing the values in PHP. Here is my JavaScript code snippet: console.log(obj); $.ajax({ method: 'POST', url: '/in ...

javascriptphpjqueryjsonajax

Get rid of all numbers from a jQuery selection except for the first and last

I am dealing with an array let numberArray = ["500", "600", "700", "800", "900", "1000", "1100", "1200"] My objective is to remove all elements except for the first and last ones. The challenge arises when the array contains only one value, as I must ens ...

javascriptjquery

Can WikiData be accessed by providing a random pageId?

My current project involves creating a Wikipedia Search App with a 'Feel Lucky' button. I have been trying to figure out if it's possible to send a request for Wikidata using a specific pageid, similar to the code below: async function lucky ...

javascriptapicors

Using Vue to cycle through an array of objects, and emphasize the chosen item by clicking on it

I have to display an array of objects in the DOM by using map method. Each item has a @click event listener where I want to highlight it with a CSS class 'hover'. The desired functionality is to mimic a menu system where only the clicked item sho ...

javascriptarraysobjectvue.jsvuejs2

Reviving jQuery Smooth Zoom Pan viewer following container resize

I am in the process of developing a responsive image viewer and have decided to incorporate the Smooth Zoom Pan plugin for enhanced pan/zoom functionality. Within my layout, I have two primary panels: the viewer container and a controls container that are ...

javascriptjqueryresponsive

What are the best practices for utilizing an array of routes?

I'm new to working with react but I noticed something strange. My routes are currently set up like this: <Main> <Route exact path="/home" component={Home} /> <Route exact path="/home1" com ...

javascriptreactjstypescriptreact-router-dom