AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

Display Loading Image

Lakshika Mathur by Lakshika Mathur
January 1, 2020
Reading Time: 2 mins read
0
Display Loading Image While Page Loads using jQuery and CSS

A web page load time depends on the page element. Therefore, it may be longer for a lot of images, JavaScript, and CSS. Sometimes well-designed pages grieve for page load time. So, there is a lot of ways to enhance your web pages to load faster. Therefore, displaying a loading image on page load is a great idea to maintain the user experience of your website.

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Build an HTML5 Video Player with Custom Controls

With the help of using jQuery and CSS, you can easily display a loading icon until the page loads completely. Here we’ll offer you an easy way and short code snippets to show a loading image during page loading.

HTML

Add the following HTML after the <body> opening tag. Therefore, this loader div will display a loading image on page load.

<div class="loader"></div>

SEE ALSO: How to Generate QR Code with PHP using Google Chart API

CSS

You can use the following CSS to show a loading image on loader div, so make a position at the centre of the page and cover the entire screen with a transparent white background.

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

JavaScript

Initially, comprise the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

After doing that, add the following line of code to hide the loaded image while the page loads completely.

<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>

Also, ensure that you have placed the entire JavaScript code under the <head> tag.

Also, read our previous blog- How to Create Loader Animation with CSS

 

Tags: CSSDisplay Loading Image
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Build an HTML5 Video Player with Custom Controls
HTML & CSS

Build an HTML5 Video Player with Custom Controls

January 2, 2020
87
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
How to Create Loader Animation with CSS
HTML & CSS

How to Create Loader Animation with CSS

January 1, 2020
10
Accessing Webcam and Capture Image using HTML5 and JavaScript
HTML & CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

December 30, 2019
41
Next Post
How to Install LAMP (Linux, Apache, MySQL, PHP) on Ubuntu

How to Install LAMP (Linux, Apache, MySQL, PHP) on Ubuntu

How to Connect to the Remote MySQL Database using PHP

How to Connect to the Remote MySQL Database using PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version