Display a loading symbol when the iframe is being loaded and also when its source is being changed

Is it possible to have a loading.gif displayed when my iframe is loaded?

I managed to do this using some code I came across here: Displaying a loading gif while iframe content loads

However, there is a new issue on my website. I have checkboxes and radio buttons that change the source of the iframe and refresh it when selected. Unfortunately, the loading symbol only appears when the entire page reloads, not when the iframe switches its source and undergoes a refresh. How can I resolve this problem?

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>

Solution courtesy of Jay, view full response here

javascriptjquerycssiframe

Answer №1

While I haven't personally tried this out, my understanding is that the jQuery on("load") function activates each time an iframe is refreshed. To implement this, replace the traditional onload attribute with the following code snippet:

$("#frameId").on("load", function () {
    console.log("reloaded"); // Use this section to show the loading.gif file
})

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 incorporate a dynamic HTML form that allows for input elements to be added both horizontally and vertically while maintaining connected lines

Looking to design a form that showcases HTML elements in both vertical and horizontal positions, with lines connecting them as seen in this example: https://i.sstatic.net/jB12f.png. Can anyone offer guidance on how to achieve this? Thanks! ...

javascripthtmlcssvue.jsvuejs2

Finding Corresponding Values in an Array with JavaScript

I am working with an array of objects that have a specific format: [ { "card_details": { "cardType": "gift" }, "merchant_details": { "merchantName": "Walter Heisenberg1", "timeZone": "+05:30", } }, { "card_detai ...

javascriptarraysnode.jsfilter

Utilize composer to integrate jquery.js into your project

My attempt to add the jquery.js file to my project using composer has hit a snag. Here is the code snippet I placed in my composer.json located in the root directory of my project: { "type": "package", "package": { "name": "jquery/jquery" ...

jqueryjsoncomposer-php

The onClick event is failing to function properly due to the presence of nested tags within

My onClick event is not working with this HTML code <a class='list-group-item media' href='#'> <div class='media-body'> <div class='pull-left'> <div class='lg-item ...

javascriptjqueryhtmlevent-handling

Ways to avoid grid overflow

As a newcomer to CSS grid, I am struggling to understand how to prevent components from overflowing a grid. The section in question, with the class name of profile-widget-wrapper, is defined with grid-row:2/4 but is overflowing the grid. Can anyone provide ...

htmlcsscss-grid

Tips for concealing a div when the mouse is moved off it?

My goal is to create a simple hover effect where hovering over an image within a view filled with images displays an additional div. This part works as expected. However, I'm facing issues when trying to hide the same div when the user moves out of t ...

javascriptjqueryhoverhide

Enable user to reorder rows within a table and persist modifications to the database in ASP.NET MVC

I am working with a collection of photos that have an "Order" property. My client has requested the ability to rearrange the items and update the server with the changes. Can anyone provide guidance on how I can achieve this? Specifically, I am looking fo ...

jqueryasp.netasp.net-mvctwitter-bootstraphtml-table

Challenges with looping in Jquery animations

I've been working on an animation function that I want to run in a loop. So far, I've managed to get it to work for one iteration, but I'm struggling to figure out how to repeat the loop a specific number of times. Below is the code for my a ...

jquerycssanimationjquery-animate

Customizing settings for reinitializing the Ajax range slider in Foundation 5

Is there a way to initialize foundation.slider.js and update settings through ajax? For instance, if I have a range slider with a step limit of 5, can I dynamically change it to 7 after receiving an ajax response by clicking a button? ...

javascriptajaxsliderzurb-foundation

Centering numerous elements on all screen sizes and devices

Is there a way to align elements in the center of the screen both vertically and horizontally without specifying width and height for mobile and desktop views? How can I make it responsive so that it appears centered on all devices? .parent-container{ ...

htmlcss

What steps should I take to resolve the issue where Angular project error states that the data path "/polyfills" must be a string?

I am struggling with deploying my Angular app to Firebase and/or running it successfully locally using NodeJS version 18. To access the package.json and source code, you can click on this link: https://github.com/anshumankmr/jovian-genai-hackathon/blob/mas ...

javascriptangularnpmbuild

How to trigger an Angular JS route without loading a view

Could someone help me with calling the /auth/logout url to get redirected after a session is deleted? app.config(['$routeProvider',function($routeProvider) { $routeProvider .when('/auth/logout',{ controller:'AuthLo ...

javascriptangularjscontrollersroute-provider

Unable to concatenate values from Object in JavaScript

Although it may seem trivial, the following code is giving me trouble: window.temp1.targetInterests It gives me back: Object {Famosos: "Famosos", Musica: "Música", Humor: "Humor"} I attempted to join it: window.temp1.targetInterests.join('/&apos ...

javascript

Is it possible to refresh AdSense banner when the router changes?

Is there a way to reload the AdSense banner ads when the router changes? I've been encountering issues trying to re-add the script and HTML properly. Any guidance on how this should be done would be greatly appreciated... This is just a test for one ...

javascriptvue.js

Struggling with an error while experimenting with tensorflow/teachable machine on vuejs

After experimenting with vuejs and , I encountered an issue while trying to export the model for my project. As I adjusted the syntax to fit Vue, I hit a roadblock when the code returned an error stating "cannot read properties of undefined...." console.lo ...

javascriptlaravelvue.jstensorflow.js

What is the method for adding color to the select and option fields?

On my website, I have created a contact form and I am trying to customize the select field by adding colors like other fields. However, when I choose an option from the select field, it is not showing up. Can you please help me identify what mistake I migh ...

htmlformscss

Exclusively for Numerical Input with Number Keys

A customer on a website requires a Zip Code field that only accepts 5-digit numbers and triggers the numeric keypad on iOS and Android devices. It should also be compatible with external number pads on laptops. I've tried various approaches like keyC ...

javascriptjqueryhtml

Trigger an Ajax upload by clicking a different element than the upload button

Currently, I am using Ajax Upload to sequentially upload a maximum of 6 images. Each image has its own corresponding div in the layout, and I want the upload action to be initiated when I click on these divs. However, my attempt at achieving this functiona ...

jqueryajaximage-uploading

Unable to transfer data through Ionic popover

I've encountered an issue when trying to pass data to my popover component, as the data doesn't seem to be sent successfully. Code HTML <div class="message" id="conversation" *ngFor="let message of messages.notes"> <ion-row class= ...

javascriptangulartypescriptionic-framework

Can image data be extracted from a canvas without needing to physically render the canvas?

I am currently working on an Angular application that utilizes Chart.js to create dynamic charts in various views. Additionally, the application has the capability to export data to a PDF format using the PDFMake JavaScript library, which is a basic tool a ...

javascriptangularjshtmlcanvaschart.js