show div on load

بدأه هالي الدهوكي في 28 مارس 2012 · 2 رد · 581 مشاهدة · في قسم البرمجة بــ Javascript

#128 مارس 2012 في 05:10 صاحب الموضوع

مرحبا اخواني

كيف الحال إن شاء الله تكونوا في تمام الصحة و العافية ... لدي سوال و رايته في احد مواقع عربية ..لكن لا اتذكر اسم الموقع ..

وهو

مثلا عندي 2 ديف div

الأول فيه محتويات الموقع مثل صور و كتابات و كذا .

<div id="divsite">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
</div>

و في ديف الثاني فيه صورة تحميل متحركة

<div id="load">
<img src="http://www.closerlondon.com/brand_management_app/images/slider/loadingBar.gif">
</div>

و كل ما بدي ايا هو اذا لم تتم عملية التحميل الصفحة يضهر ديف الثاني و اخفاء ديف الاول و عند اكتمال تحميل الصفحة يخفي ديف الثاني و يضهر ديف الاول ...

بعتقد حتى الزائر لا يمل من الموقع فكرة جميلة ...

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#228 مارس 2012 في 10:21

أخف ال div الذي يجتوي على الصور، وعند الحدث onload قم بإظهاره وإخفاء صورة التحميل

<script type="text/javascript">
	window.onload = function() {
		document.getElementById('divsite').style.display = 'block';
		document.getElementById('load').style.display = 'none';
	}
</script>
<div id="load">
<img src="http://www.closerlondon.com/brand_management_app/images/slider/loadingBar.gif">
</div>
<div id="divsite" style="display: none">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Data_Flow_Diagram_Example.jpg/360px-Data_Flow_Diagram_Example.jpg">
</div>

#328 مارس 2012 في 20:59

مشكور يا غالي بصراحة رد كافي لما طلبته منك و شكرا جزيلا اخي تم ترشيح اجابتك كافضل اجابة شكرا لك