DID YOU MEAN :

Sunday, June 16, 2013

Show Loading Image While Website Images Are Still Loading Using jQuery

PROBLEM


Want to show loading image while website images are still loading.




SOLUTION

This bug me down for about half an hour before I found a solution. The solution is by using jQuery Function that will detect if website images are still loading. This will also make your website content not tangible until all the images are loaded. 

Credits To Stack Overflow Answerer Named MEHYAA For This Awesome Answer

STEP 1

Put this code to your css style

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

STEP 2

Put this code after the <body>

<div id="loading">
  <img id="loading-image" src="images/loading.gif" alt="Loading..." />
</div>

STEP 3

Put this code before the </body>

<script language="javascript" type="text/javascript">
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

You're done! Now you can see loading image while your website images are still loading. Style as you want.

RELATED POST : RELATED POST : RELATED POST

TRAFFIC HUNGER KEYWORD SO FAR :: TRAFFIC HUNGER KEYWORD SO FAR :: TRAFFIC HUNGER KEYWORD SO FAR

3D Animation ( 2 ) 6/42 National Lotto ( 40 ) 6/45 Mega Lotto ( 96 ) 6/49 Nationwide Lotto ( 37 ) 6/55 Grand Lotto ( 98 ) Acer ( 2 ) Album ( 1 ) Alcatel ( 1 ) Alesana ( 2 ) Alien ( 1 ) Alodia Gosiengfiao ( 4 ) Anderson Silva ( 1 ) Android ( 1 ) Anime ( 2 ) Anti-virus ( 1 ) Apache ( 1 ) Apple ( 1 ) April Fools Day ( 1 ) Archos ( 2 ) Ariella Arida ( 1 ) Artist ( 3 ) Ashley Gosiengfiao ( 2 ) ASUS ( 1 ) Atom Araullo ( 1 ) Attack on Titan ( 1 ) Bacoor ( 1 ) BancNet ( 1 ) Band ( 3 ) Batch file ( 1 ) BBC ( 2 ) Bebian ( 1 ) Binay ( 1 ) Bitnami ( 1 ) Blade Template ( 1 ) Blogger ( 2 ) Blogging ( 2 ) Bruce Lee ( 1 ) Camera ( 1 ) Cars ( 1 ) Cebu ( 1 ) Celebrity ( 7 ) Cheridel Alejandrino ( 1 ) Cherry Mobile ( 3 ) China ( 2 ) Chito Miranda ( 1 ) Chris Weidman ( 1 ) Christine Patrimonio ( 1 ) Civil Service ( 1 ) Clarice Patrimonio ( 1 ) Cloudfone ( 1 ) Coby ( 1 ) Code Bright ( 1 ) Coderbyte ( 19 ) Commercial ( 2 ) Components ( 1 ) Computer ( 4 ) Concert ( 5 ) Condom ( 1 ) Conquer Divide ( 1 ) Controversial ( 3 ) Cosmopolitan ( 1 ) Cosplayer ( 1 ) Coupon Codes ( 12 ) Cucumber ( 1 ) Daniel Padilla ( 2 ) Dayle Rees ( 1 ) Deniece Milinette Cornejo ( 1 ) DJ Image Slider ( 1 ) DNS Server ( 1 ) Do Follow ( 1 ) Domain ( 1 ) Doraemon ( 1 ) DOTA ( 1 ) EB Babes ( 1 ) Entance Fee ( 6 ) Entertainment ( 19 ) Esquire ( 1 ) Ethical Hacking ( 1 ) Events ( 9 ) Facebook ( 7 ) Facts ( 1 ) Fakebook ( 2 ) FHM ( 4 ) Film ( 1 ) Flame of Recca ( 1 ) Franxia Garcia ( 1 ) Free ( 2 ) Free Internet ( 1 ) Friends ( 1 ) Gadgets ( 16 ) Game ( 1 ) Genelyn Sandaga ( 1 ) Giant Snake ( 1 ) GIMP ( 2 ) Gionee Elife ( 2 ) GitHub ( 1 ) Globe ( 7 ) Google ( 1 ) Google Map ( 1 ) GoSakto ( 1 ) Guiness World Records ( 1 ) Haiyan ( 11 ) Hitler ( 1 ) HostGator ( 1 ) How To ( 24 ) Hulk ( 1 ) Human Dolls ( 1 ) Iglesia Ni Cristo ( 3 ) INC ( 3 ) Infographics ( 4 ) Infolinks ( 1 ) Information Technology ( 2 ) Janelle Manahan ( 1 ) Janine Tugonon ( 1 ) JavaScript ( 1 ) Jaypee Santos ( 1 ) Jennifer Sale ( 1 ) Jessy Mendiola ( 1 ) Jill Rose Mendoza ( 4 ) Jinri Park ( 1 ) Joey Ayala ( 1 ) Joomla ( 2 ) Joomla! ( 1 ) jQuery ( 1 ) Julie Vega ( 1 ) Justin Bieber ( 4 ) Katryn Bernardo ( 1 ) Kim Chiu ( 1 ) Kris Aquino ( 1 ) Lady Gaga ( 1 ) Laravel ( 2 ) Lenovo Mobiles ( 1 ) LG ( 1 ) Linux ( 1 ) Live Action ( 1 ) Live Stream ( 1 ) Lose/Lose ( 1 ) Luffy ( 1 ) Lupang Hinirang ( 1 ) magTXT ( 1 ) Mang Kanor ( 4 ) Marcos ( 1 ) Marian Rivera ( 1 ) Maring ( 1 ) Maritess Guanzon ( 1 ) Master Wendell ( 2 ) Masterbating ( 1 ) Meme ( 8 ) Michelle Mischi Mediana ( 1 ) Miscellaneous ( 1 ) Mitsubishi ( 1 ) MOA Arena ( 1 ) Movie ( 6 ) Mr. Bean ( 1 ) MRT ( 1 ) Music ( 5 ) MyPhone ( 1 ) MySQL ( 2 ) Namecheap ( 11 ) Napoles ( 1 ) National Anthem ( 1 ) NBA ( 1 ) Neneng Brown ( 2 ) Neo ( 1 ) Neri Naig ( 2 ) News ( 26 ) Nude ( 1 ) O+ ( 4 ) oDesk ( 1 ) OMG Awards ( 1 ) One Piece ( 1 ) Operating System ( 1 ) OS ( 1 ) Pacquiao ( 1 ) Pangalan.com ( 1 ) Papa John's Pizza ( 1 ) Parokya ni Edgar ( 1 ) Paul Walker ( 2 ) PCSO Lotto Results ( 159 ) Penetration Testing ( 1 ) Phablet ( 1 ) Philippines ( 2 ) Photo Compilation ( 17 ) Photo News ( 1 ) Photo Scandal ( 1 ) PHP ( 3 ) Pickup Line ( 1 ) Plugin ( 2 ) Politics ( 1 ) Pork Barrel ( 2 ) Poster ( 1 ) PRC Examination Results ( 37 ) Programmer ( 3 ) Programming ( 32 ) Promo ( 1 ) Promos ( 7 ) PULP Summer Slam ( 2 ) Quotes ( 4 ) Rails ( 2 ) Ram Revilla ( 1 ) Red Mobile ( 1 ) Red Sea ( 1 ) Regghie M Orpiada ( 2 ) Resort ( 6 ) Review ( 2 ) Rios ( 1 ) Rowan Atkinson ( 1 ) Ruby ( 21 ) Rurouni Kenshin ( 1 ) Russia ( 1 ) Sabo ( 1 ) Samsung ( 2 ) Sarah Geronimo ( 1 ) Sarah Lahbati ( 1 ) SBR ( 1 ) Scam ( 1 ) Scandal ( 16 ) Science ( 1 ) Seat Plan ( 1 ) Secret Codes ( 2 ) SEO ( 1 ) Service Center ( 10 ) Showbiz ( 12 ) Shutdown ( 1 ) SKK ( 1 ) Skyworth ( 1 ) Sleeping With Sirens ( 1 ) Slender Man ( 1 ) SM ( 1 ) Smart ( 1 ) Smartphones ( 12 ) Smartwatch ( 1 ) SMS ( 1 ) Social Media ( 1 ) Solution ( 17 ) Spam ( 1 ) Specification ( 14 ) Sport ( 1 ) SQL ( 1 ) SQL Injection ( 5 ) SQL Injection Scanner ( 1 ) SQLyog ( 1 ) Starmobile ( 1 ) Subaru Suv Forester ( 1 ) Sublime Text 2 ( 2 ) Sublime Text 3 ( 1 ) Sun Cellular ( 1 ) Super Junior ( 1 ) Super Sireyna ( 1 ) Superman ( 1 ) Suspect ( 1 ) Tablet ( 1 ) Talk N Text ( 3 ) Taxi Driver ( 2 ) Technology ( 15 ) Test Answer ( 2 ) Text Editor ( 1 ) The Conjuring ( 1 ) Thor ( 3 ) Throwback Thursday ( 1 ) Totoy Brown ( 2 ) Touch Mobile ( 2 ) Trolling ( 1 ) Tutorials ( 31 ) Tweet ( 1 ) Twitter ( 5 ) Typhoon ( 5 ) UAAP ( 1 ) Ubuntu ( 3 ) UFC ( 1 ) Valentines ( 1 ) Valeria Lukyanova ( 1 ) VB ( 4 ) VB6 ( 6 ) Video ( 12 ) Virus ( 1 ) Vishalini ( 1 ) Visual Basic ( 6 ) Wally Bayola ( 1 ) Watch Phone ( 1 ) Web Design ( 1 ) Web Development ( 3 ) Web Hosting ( 2 ) Website ( 15 ) Winamp ( 1 ) Windows ( 6 ) XAMPP ( 1 ) Yahoo ( 1 ) Yeb Sano ( 1 ) Yolanda ( 12 ) Yosh Rivera ( 1 ) YouTube ( 1 )
Related Posts Plugin for WordPress, Blogger...