Is there a way to initiate a callback function once all the contents of an UpdatePanel have been fully loaded?

Looking for a solution with an ASP.NET UpdatePanel that contains multiple images. I am trying to trigger some javascript code after the UpdatePanel is refreshed, but only after all images have finished loading. I attempted using add_endRequest as a callback function, but it doesn't ensure the images are fully loaded before executing. Any ideas on how to delay the function execution until all images are loaded?

Answer №1

It is important to handle the load event of each image individually and keep track of their loading progress.

You need to count the total number of images, listen for their load events, keep a record of when each one finishes loading (such as by incrementing a global JavaScript variable), and execute the "finished loading all images" function once all images have been loaded.

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

The requested resource for deletion could not be found

I'm having trouble deleting a document in Mongodb and I keep getting the "cannot get delete" error delete route router.delete("/delete/:id",(req,res)=>{ filmModel.deleteOne({_id:req.params.id}) .then(()=>{ res.redirect( ...

Detect click outside in JavaScript for closing

While this topic has been discussed before, each issue presents its own unique challenges. Despite trying various solutions and examples for making the submenu close when clicking outside of it, I have not had any success. Is there a way to make the uslug ...

Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover... Link to the code on Codepen HTML <div class="se ...

Redux/React project bundle

I am currently attempting to incorporate the package https://www.npmjs.com/package/is-url into my React/Redux project, but I'm unsure about how to go about importing it. Are there any other ES6-compatible installation options that you would recommend ...

Steps to modify the border width upon gaining focus

I am struggling to adjust the border width when my input box is focused. Currently, it has a 1px solid border which changes to a 2px different color solid border upon focus. However, this change in border width is causing the containing div to shift by 1px ...

Prevent fixed element from scrolling beyond a specific point

I'm working on a fixed sidebar that needs to scroll along with the main content and stop at a specific point when scrolling down, and vice versa when scrolling up. I've created a script that calculates the window height, current scroll position ...

Why does everything seem to move in sync with the table's scrolling?

I recently had an issue resolved that fixed most of my concerns: I needed to make three separate edits, and now when I reintroduce the other two edits, they are included within the table section and scroll along with the table instead of being stuck beneat ...

Looking for a slideshow with interactive play buttons?

Looking for a slideshow similar to the one on the homepage of this site: Has anyone ever used a slideshow like that before? Any other references or help would be appreciated! ...

Is it possible that initial messages sent in signalR do not have a messageID assigned to

I have created a simple code that is supposed to produce the following output when connected: "FIRST !" "Welcome" Displaying 3 messages with a timer This is the code snippet : int i = 0; protected override Task OnConnected(IRequest request, string connec ...

PHP unable to display HTML form element using its designated ID attribute

I've been experiencing some difficulties with PHP echoing a label element that contains an ID attribute within an HTML form. My intention was to utilize the ID attribute in order to avoid having to modify the JS code to use the name attribute instead. ...

Request with content Type multipart/form experienced Error 406

I encountered an issue with my axios request in Express const formData = new FormData(); formData.append("file", fs.createReadStream(file.path)); formData.append("requestid", '123456'); const options = { method: 'POST& ...

What is the best way to utilize ng-if in the index.html page depending on the URL?

Is there a way to hide certain elements in the index page based on the URL of nested views? In my index.html file, I am looking to implement something like this: <top-bar ng-if="!home"></top-bar> <ui-view class="reveal-animation"> ...

How can I load a .json file into JavaScript without inserting it directly into the code?

Currently, I am dealing with a lengthy JSON snippet that resembles the following: { "section: [ [stuff] ] } To incorporate this into my JavaScript code, I currently use the following approach: var obj = { // {All the stuff from above} } My ...

Discovering old (potentially neglected) npm dependencies: strategies for locating outdated packages

I am aware of the npm outdated command, which shows out-of-date dependencies only if a new version has been published. However, in certain cases (such as abandoned projects), there may not be a new version released and the package could still be considere ...

When attempting to send a POST request to /api/users/login, the system returned an error stating that "

Is there a way to make a post request to the mLab Database in order to determine if a user account already exists? The server's response states that the User is not defined. Can you please review my code? // @route post api/user/login# router.post(& ...

Leveraging a JavaScript variable declared outside the function to successfully transfer data to my AJAX function

Every time the enter key is pressed, my AJAX function gets executed. I used to pass a set of javascript variables equal to elements in the HTML (the contents of a text area) as data for the AJAX function. Now, I want these JS variables to hold values from ...

Effortless AJAX Submission and MySQL Data Refresh

I've hit a roadblock and can't seem to figure things out. I'm getting rid of my current code because it's not working well across different browsers, particularly when it comes to ajax submission. Could someone please provide me with a ...

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

Generating hyperlink regions dynamically

I am looking to create an image with a link map that will contain multiple areas that need to be updated frequently. Instead of constantly recreating the areas every few seconds, I want to generate them only when the user clicks on the image. I initially ...

Is there a way for me to access the response from the PHP file I'm calling with Ajax?

I am just starting to explore ajax and jquery, and I recently found a code online that I'm tweaking for my own use. However, I am struggling with how to handle responses from PHP in this context. The current setup involves ajax POSTing to a php page ...