Identifying Image Requests Generated Dynamically in Javascript: A Guide

Essentially, my current setup involves utilizing a JavaScript Library that includes the following code within a function:

var img = new Image();   // Creating a new img element
img.src = 'URL/myImage.png'; // Setting the source path

This results in multiple HTTP GET requests being sent to the server (visible in Firefox's Developer Console > Network, with their type displayed as 'img' under the 'Cause' column).

Is there a way for me to detect events such as when the image starts loading and when it has finished loading based on the above code, all within my index.html file using the JavaScript library (I am unable to modify the library)?

javascriptajaxurlxmlhttprequest

Answer №1

To achieve this, one must pay attention to the onloadstart and onload events. 

function triggerOnImageLoadStart() {
  console.log("picture is loading");
}

function triggerOnImageLoadComplete() {
  console.log("picture loaded successfully");
}
var picture = new Image();
picture.onload = triggerOnImageLoadComplete;
picture.onloadstart = triggerOnImageLoadStart;
picture.src = "https://picsum.photos/200/300";

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 the best way to display a file explorer window in an electron application that allows users to choose a specific folder?

How can I utilize Electron with React to open a file explorer window, allowing users to choose a specific folder and then capturing the selected filepath for additional processing? Any guidance or tips on how to achieve this would be greatly appreciated ...

javascriptreactjselectronmicrosoft-file-explorer

The visual representation of my data in Highchart appears sporadic, with the points scattered rather than following a clean, linear progression from left to right

I am working on displaying a 2D array [timestamp, count] on a highchart for the past 90 days from left to right. However, I am facing an issue where the chart appears sporadic when introduced to production data. It works fine with smaller datasets. After ...

javascriptc#jqueryajax

How to download a file using AJAX in Laravel?

Is there a way to download a CSV file within an ajax call? I have an ajax request in my Laravel controller that successfully retrieves the file contents in the response. However, I am facing issues with actually downloading the file. Laravel controller c ...

javascriptphpjqueryajaxlaravel

Struggling with replacing text in an array using Javascript (Angular)

I am facing an issue where I need to remove the 'hello' substring from each object field in my objects array. However, I keep getting an error message saying "Cannot read property 'indexOf' of null". This error is occurring because I am ...

javascriptangularjs

Error: Swagger-codegen encountered an issue where 'Object' arguments were disregarded

I've encountered a strange error that I can't seem to troubleshoot through online searches. My current project involves converting swagger files to typescript using a script. The error message simply states what's in the title, and unfortuna ...

javascriptjsonobjectswaggercommand-line-interface

What is preventing me from accessing a function that is declared using function declaration while using a debugger?

When pausing at the debugger statement, an attempt to call foo results in a ReferenceError. It appears that the function is not defined within the script's context or scope, similar to how a local variable like x is. The script example.js is as follo ...

javascriptnode.jsdebuggingnode-inspector

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

javascriptcssangularjshtmltwitter-bootstrap

Issue with binding classes dynamically in vue with svg elements

I'm attempting to create a custom typing program for one of my students using SVG to display the words and class binding with Vue.js. The goal is to change the color of the characters when the correct key is pressed by the user. However, I've enc ...

javascriptvue.jssvg

What is the duration of time a user has spent on a specific asp.net page according to custom analytics?

I have been brainstorming ways to track how long a user stays on a page within my ASP.NET application. In order to do this, I am saving the userid, pagename, pageenteredtime, and pagelefttime in a database. Each entry also has its own unique identifier kno ...

asp.netjavascriptanalytics

Utilizing interactions between a JavaScript scrollable container and Python/selenium

My goal is to utilize Selenium/Python in order to automate the process of downloading datasets from . While I am new to Javascript, I am determined to learn and overcome any obstacles that may arise during this project. Currently, I am focusing on the init ...

javascriptpythonseleniumweb-scrapingcensus

Having trouble submitting the edit form

I had the idea to create an edit form that would replace the existing data in a table for editing. However, I am facing issues with getting the form to submit properly even though the create form is functioning correctly. Below is the code snippet that I n ...

javascriptc#jqueryajaxasp.net-mvc

Using Jquery to toggle the visibility of div elements with the same structure, but ensuring only one is

Many people have posed this question. I am attempting to create a functionality where a div can expand and collapse using a +/- button. I have 5 divs with class=="expanderContent". When the function below is triggered by a click, all 5 items expand or coll ...

javascriptjqueryhtmlcss

Establishing the Time-to-Live (TTL) with Redis-OM and Node Object Mapping

Recently, I stumbled upon the exciting new Redis-OM Node Object Mapping feature. Although I have limited experience with Redis, I am eager to dive into it now. Currently, I have a basic function in place for creating rooms but I want these rooms to automa ...

javascriptnode.jsredisormttl

Using React.js to compute dates based on user-inputted dates

Today was dedicated to tackling the coding challenge of creating a function. I'm currently working on a react app using the PERN stack. The form I'm working on includes multiple date inputs, with two date columns and a total days column. My goal ...

javascriptreactjs

Divide a JSON API object into segments within an express application

One way I'd like to organize my API's output is by splitting it into multiple pages. My idea is to access them using URLs like this: http://127.0.0.1:3000/api/articles/0/<API-TOKEN> This specific URL would display the first page containing ...

javascriptjsonnode.jsapiexpress

Is it possible to reuse variables declared in a Javascript function within the same function?

string empCode = ds.Tables[0].Rows[i]["EMP_CODE"].ToString(); string empName = ds.Tables[0].Rows[i]["EMP_NAME"].ToString(); string gradeCode = ds.Tables[0].Rows[i]["GRADE_CODE"].ToString(); tr = new TableRow(); td = new Ta ...

javascriptc#htmlasp.net

data argument cannot accept an array entry - internal server issue

My attempt to call a C# MVC controller method from a custom JavaScript script using Ajax seems to be encountering an issue with accepting array entries as arguments within the Ajax request. I tested assigning them to non-array variables, which worked, but ...

javascriptc#ajaxasp.net-mvc

Else token error caught off guard

I am currently learning about if/else statements on Codecademy and keep encountering an error that says, "SyntaxError: Unexpected token else". Can someone please assist me? Below is the code I am working on: // Confirm if the user is ready to play conf ...

javascript

Utilize Google Geocoder to Input Coordinates into Specific Fields

Currently, I am on the lookout for a minimalistic Google geocoding script. Most scripts I have come across are quite large and complex, but this one stands out for its simplicity. However, it lacks the feature of automatically inputting the coordinates int ...

javascriptgoogle-mapsgoogle-maps-api-3geocode

Triggering a success message with jQuery Validate

Can you help me understand how to trigger the display of a message once the callback to the remote function is completed for either the username or email address, and the returned data is equal to "n"? JS: $(document).ready(function() { var validato ...

javascriptjqueryajax