Анимация докато зарежда страницата...

[Msecurity]

Здравейте колеги
Искам да сложа едно гифче което да се показва докато страница не зареди на 100%.
Но идеята ми е хедъра и менюто да си ги показва , и само този див да е скрит -
<div class="workplace"> , и едва когато зареди напълно тогава да го показва и на негово място да е гифчето.
Пробвах различни вариатни... но не се получи, дивът се показва и върху него не си зарежда...

Поздрави

 

[syneidesys]

Търси ли със ключовата дума -preloader js или preloader jquery


Примерно тоя код се използва за целия сайт http://oranus-bg.com/ или за отделни елементи със клас или ид:

// JavaScript Document

		jQuery(function(){
       jQuery("#content img").wrap("<div />");
		});

$.fn.preloader = function(options){

	var defaults = {
		             delay:200,
					 check_timer:300,
					 ondone:function(){ },
					 oneachload:function(image){  },
					 fadein:500
					};
	
	// variables declaration and precaching images and parent container
	 var options = $.extend(defaults, options),
	 root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) ,  timer ,  counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,

	 init = function(){
		
		timer = setInterval(function(){
			
			if(counter>=checkFlag.length)
			{
			clearInterval(timer);
			options.ondone();
			return;
			}
		
			for(i=0;i<images.length;i++)
			{
				if(images[i].complete==true)
				{
					if(checkFlag[i]==false)
					{
						checkFlag[i] = true;
						options.oneachload(images[i]);
						counter++;
						
						delaySum = delaySum + options.delay;
					}

					$(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
					function(){ $(this).parent().removeClass("preloader");   });			

				}
			}

			},options.check_timer) 
		 

		 } ;
	
	images.each(function(){
		
		if($(this).parent(options.preload_parent).length==0)
		$(this).wrap("<div class='preloader' />");
		else
		$(this).parent().addClass("preloader");

		checkFlag[i++] = false;
		

		}); 
	images = $.makeArray(images); 

	
	var icon = jQuery("<img />",{

		id : 'loadingicon' ,
		src : 'img/loader.gif'

		}).hide().appendTo("body");
	


	timer = setInterval(function(){

		if(icon[0].complete==true)
		{
			clearInterval(timer);
			init();
			 icon.remove();
			return;
		}

		},100);

	}

 

[Msecurity]

Акъл трябва акъъъъл
Мерси много колега
+1