Show picture during the process of loading an external webpage

Utilizing a script to load an external page (external meaning a page within my website) inside a div. Loading the page takes time, so I want to display an image until the page is fully loaded.

JAVASCRIPT


function HideLoader() {
    $('#loader').css('display', 'none');
}

function ShowLoader() {
    $('#loader').css('display', '');
}

$(document).ready(function() {
    $('.reveal').on('click', function(e) {
        e.preventDefault();
        ShowLoader();
        var link = $(this).attr('href');
        $('.page').load(link);
        $('#leftmenu').css('width', '70px');
        $("#leftmenu b,li ul").hide();
        $('li').unbind('click');
        $(this).show();
        HideLoader();
    });
});

CSS


#loader {
  display: unset;
  width: 100px;
  height: 100px;
  margin: 100px;
}

HTML

<div id="loader"> <img src="ajax-loader.gif" alt="loading" /> </div>

ISSUE: Currently displaying the image before clicking the link.

I would like the image to appear only when I click on the link and disappear once the page is fully loaded.

javascriptjqueryhtmlcss

Answer №1

To clarify...

For CSS, simply set display:none:

#loader {
  display: none;
  width: 100px;
  height: 100px;
  margin: 100px;

}

Javascript Update the following:

function ShowLoader() {
    $('#loader').css('display', 'block');
}

and also this:

 $('.reveal').on('click', function(e) {
        var $that = $(this);

        e.preventDefault();
        ShowLoader();
        var link = $(this).attr('href');
        $('.page').load(link, function(){
             HideLoader(); // this places it in the load callback, so that these actions
             $that.show(); // will occur when the load is finished
        });
		$('#leftmenu').css('width', '70px');
		$("#leftmenu b,li ul").hide();
		$('li').unbind('click');
    });

Answer №2

Your div is continuously visible. To make it invisible by default, you should modify your css accordingly:

#loader {
  display: none;
  width: 100px;
  height: 100px;
  margin: 100px;

}

The display: unset property simply reverts back to the default value which is visible.

Additionally, update your showLoader function to the following:

function ShowLoader() {
    $('#loader').css('display', 'block');
}

Answer №3

Ensure to specify the display value as 'block' in your showLoader function

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

Chrome geolocation feature does not display the permission popup for JavaScript

After the latest Chrome update, we have noticed that the popup to Allow/Block accessing a user's location from a website is no longer appearing. We tested this on Edge, Firefox, and different mobile devices, where it seems to be working fine. Current ...

javascripthtmlgoogle-chromegeolocation

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...

javascriptangulartypescript

Having trouble sending a function as a prop to a child component in React

Something odd is happening, I'm confident that the syntax is correct, but an error keeps popping up: Error: chooseMessage is not a function // MAIN COMPONENT import React, { useState } from 'react' export default function LayoutMain(prop ...

javascriptreactjsreact-propsreact-functional-component

Arrow functions in ECMAScript 6

var createTempItem = id => ({ id: id, name: "Temporary Product" }); I understand that the arrow function above is the same as: var createTempItem = function(id) { return { id: id, name: "Temporary Product" }; }; However, I am ...

javascriptreactjsecmascript-6

Divide a single array into two separate arrays using React Native

My goal is to divide an array into two separate arrays, one for letters and the other for frequencies. var list = [ "ES 324798", "LE 237076", "EN 231193" ] This is the original array that needs to be split. I am looking to create an array with all the l ...

javascriptarraysreactjsreact-native

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Stop the bootstrap carousel at a specified screen size

Looking for a way to stop the bootstrap carousel from auto-playing on screen sizes below 640px. Despite trying various methods, I have yet to find a solution that works. This is my current approach: $(document).ready(function(){ if ($(window). ...

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-carousel

Transferring a parameter from link_to to a popup window in a Rails application

I am facing an issue with passing an object to my modal in Rails. The object has a table of results with an attribute "email", but I seem unable to pass it so that I can use it within my modal. index.html.erb <div class="modal fade bs-example-modal-lg ...

javascriptjqueryhtmlruby-on-railstwitter-bootstrap

Encountered an issue while attempting to access a property from an undefined source

I am struggling with this code as I am unable to correctly split the JSON data. The error message I keep encountering is: TypeError: Cannot read property "cu_id" from undefined. Here is a snippet of the JSON data (since it's too large to di ...

javascript

Unable to send parameters via URL when making an Ajax request in Rails

Struggling to pass a parameter through a URL in an Ajax request that's triggered by a confirmation dialog. Need the value of that parameter in my Rails controller upon successful request but can't seem to make it work. Tried the following code s ...

javascriptjqueryruby-on-railsajax

Tips for displaying a message when clicking on the second level in fancytree.js

I'm looking to use fancytree.js to display an alert message only when clicking on nodes in the second level. For example: <ul> <li>1</li> <ul> <li>1.1</li> ...

javascriptjqueryfancytree

Having issues with Next.js server-side rendering when integrating API functionality

"Not building properly" means that the project is not fully completing the build process. I've developed a simple blog project with dynamic SSR that pulls data from the Notion-API to generate static blog pages. Everything functions correctly ...

javascriptnext.js

The Problem with JSON.stringify() Escaping

I am currently utilizing AJAX alongside JQuery to transmit JSON data to an API server. However, I have encountered an issue with one server that escapes the JSON string when I apply JSON.stringify(), while another server processes the same code without any ...

jqueryajaxjsonmootoolsstringify

Issue with accessing Scope value in AngularJS directive Scope

FIDDLE I've recently developed a directive that looks like this: return { restrict: 'EAC', scope: { statesActive: '=' }, link: function (scope, element, attrs) { var ...

javascriptangularjs

Angular validation with input binding using if statement

I have developed a reusable component for input fields where I included a Boolean variable called "IsValid" in my typescript file to handle validation messages. Here is the code from my typescript file: export class InputControlsComponent implements OnIn ...

htmlangulartypescriptinputbinding

Develop a search feature that automatically filters out special characters when searching through a

I am currently developing a Vue-Vuetify application with a PHP backend. I have a list of contacts that include first names, last names, and other details that are not relevant at the moment. My main query is how to search through this list while disregardi ...

javascriptvue.jssearchvuetify.js

What is the best way to showcase nested array JSON data in an HTML Table?

https://i.stack.imgur.com/OHL0A.png I attempted to access the following link http://jsfiddle.net/jlspake/v2L1ny8r/7/ but without any success. This is my TypeScript code: var viewModel = function(data){ var self = this; self.orders = ko.observableArr ...

htmljsontypescriptionic4angular8

Selecting an option from dropdown1 to retrieve a specific value from a JSON file

I currently have 2 dropdown lists to fill with data from a JSON file: $scope.categories = [ {name:"Blouse", sizes:["36","38","40","42","44","46","48","50"]}, {name:"Shirt", sizes:["36","38","40","42","44","46","48","50"]}, {name:"Pants", size ...

javascriptangularjsjson

Enhance your VueJs application with Chart.js without having to rely on refs for seamless reactive

Currently, I am delving into the world of VueJs and experimenting with Chart.js (https://github.com/apertureless/vue-chartjs). I attempted to make a doughnut chart reactive, but I achieved this using the ref property which I suspect may not be the best pr ...

javascriptvue.jschart.jsreactive

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. My goal is to insert a key-value pair into every object in the students array. ...

javascriptjson