Ways to display a loading overlay while waiting for an image to load on a webpage

Is it possible to create a loading overlay that remains visible until the first image on a webpage is fully loaded, instead of using setTimeout and then implementing lazy loading for subsequent images?

My current solution using setTimeout is not effective as there is a noticeable gap between the loader disappearing and the image appearing. The image URLs are obtained from a Wordpress API, and I am working within a template structure.

I want to ensure that users do not see a blank state by showing a loading overlay until the initial image is completely loaded. Here's the code snippet I have tried:

var img = document.querySelector("#img");
img.onload = function(){ 
  document.getElementById("loading").style.display = "none" 
}

Due to restrictions on using jQuery for this school project, I have explored various alternatives with no success. Even after adding console.log("loaded") upon image load, nothing seems to work smoothly.

javascriptimageonloadloader

Answer №1

Perhaps try setting the img.src value only after you have defined the onload event.

let image = document.createElement('img');
image.onload = function(){}
image.src = "url"

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

What is preventing the expected outcome of setting this as a background image in NextJS 13 with Tailwind CSS?

Can someone help me figure out how to achieve the desired effect for this component? import React from "react"; import Image from "next/image"; import heroBackground from "../public/hero-background.png"; const Hero = () => ...

javascriptreactjsnext.jstailwind-cssweb-frontend

Is it possible to jest at a module function that is both exported and utilized within the same module?

Just diving into unit testing and learning about spies, stubs, and mocks. I've been trying to test the verify method in password.js as shown in the code snippet below. However, I'm having trouble creating a stub for the hash function within the ...

javascriptnode.jsunit-testingtestingsinon

Executing an AJAX request when the window is closed using jQuery

I have a clear question: how can I trigger an ajax call when the user clicks on the browser close button, but before actually closing the window? Are there any possible solutions for this specific scenario? I do not want any confirmation boxes - just a w ...

javascripthtmlcssajaxbrowser

How to find the length of an array in Node.js without utilizing JQuery

Is it possible to determine the length of the Dimensions array in nodejs? The array can have 1 or 2 blocks, and I need to write an if condition based on this length. Since this code is inside an AWS-Lambda function, using JQ may not be an option. For exam ...

javascriptnode.jsjson

Having trouble retrieving data from a JSON file using JQuery AJAX?

My JSON file structure is presented as follows: { head: { link: [], vars: [ "CompanyName", "Company_Name", "Foundation_URI", "Foundation_Name", "Latitude", "Longitude" ] }, results: { distinct: fal ...

javascriptajaxjquery

Continuously receiving unhandled promise rejection errors despite implementing a try-catch block

Every time I run my code, I encounter the following issue: An UnhandledPromiseRejectionWarning is being thrown, indicating that a promise rejection was not properly handled. This can happen if you throw an error inside an async function without a catch bl ...

javascriptnode.jsparsingpromiseparse-platform

The drop-down component is being filled with data but unfortunately, only dummy data is functional at the

Having trouble populating data in the drop-down component. Everything works fine when using dummy JSON data as shown in the comments. The GET request service retrieves the necessary data, and then I assign the response to the appropriate variable. The GET ...

javascriptangularjsjson

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...

javascripttypescriptimagebase64blob

Combining Files in Angular 2 for Optimal Production Deployment

What is the best method for packaging and combining an Angular 2 application for production? My goal is to have an index.html file and a single app.min.js file. Although the Angular 2 documentation mentions using webpack, I found it to be overly complex f ...

javascripthtmlangularjsbuildangular

What is the best way to transfer a PHP variable to an external PHP file I am retrieving data from using AJAX?

I have two files named index.php and ajax.php. In index.php, I am using AJAX to retrieve data from ajax.php and display it on the page. I want to pass the username to ajax.php so that I can use it in my SQL statement. Does anyone know how I can accomplish ...

javascriptphpjquerymysqlajax

Adjusting the location of circles generated by d3 using a time interval

As a newbie to d3 and JavaScript, I'm facing an error that is beyond my current knowledge. I have successfully generated 6 circles using a 2D array and implemented a function to increment their x and y positions by 1 in each call of a timer. However, ...

javascriptasp.net-mvcd3.js

Generate a document from the data entered in an HTML form using the web browser (on the client side)

My website contains a form and I want users to be able to generate a text or xml file based on their input. However, I prefer not to set up a web server just for this purpose. Is there a feasible solution for achieving this, possibly with the use of Javas ...

javascripthtmlwebformsclient-side

Choose an option removed upon clicking

I need to remove the option with a value of 0 when the user selects from the dropdown list. Choose: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <form:select id="CONTEXTE" path="CONTEXTE" onclick="go()" class="s ...

javascriptjqueryselect

Ensure that only non-alphabetic characters are accepted in keypress validation, while allowing all other keys to function

Restriction: Only numbers, spaces, and plus symbols are allowed in the text box $('#value').bind('keypress', function (e) { if ($('#value').val().length == 0) { if (e.which == 32) { //space bar e.preven ...

javascriptjqueryjquery-events

Learn the process of configuring webpack to bundle assets/images from a specified URL and incorporate them into a component seamlessly

Webpack is currently copying static png,jpg,svg files that are imported into each component file. The path to the hosting image is fixed and static. The component file in question: mycomponent.ts import img from 'assets/img/aa.png .... &l ...

javascriptnode.jsreactjswebpackwebpack-4

What is the best way to pause the function execution until the ajax call is finished?

I have the following code snippet: function validate(){ if (document.getElementById('<%=txtSeqNo.ClientId %>').value.trim() == "") { alert('Please enter Sequence number.'); return false; } var result = checkduplicateseq( ...

javascriptjqueryajax

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the curr ...

javascriptjqueryhtmlcss

Enhance and minimize perspective in Three.js

Recently, I included a sphere and plane geometry in my scene. However, when I zoom in, the plane geometry seems too large and when I zoom out, it appears unnaturally small. I am struggling to find a solution to this issue - can anyone offer some guidance ...

javascriptcamerathree.js

Implementing VisualCaptcha with AngularJS and slimPHP in a RESTful manner

I am currently using AngularJS on the frontend and SlimPHP on the backend with REST URLs. In an attempt to integrate VisualCaptcha, I followed the instructions on the PHP side and verified that it works. I have a simple Angular dataService that fetches t ...

javascriptphpangularjscaptchaslim

What is the best way to completely manipulate the rotation of a <div>?

Does anyone have a solution for controlling the rotation of a div using CSS? I've been grappling with this issue for some time now, but I can't seem to find a proper fix. Whenever I try to rotate a div within a table cell, the width of the cell ...

javascripthtmlcsshtml-tablecenter