عمر العيثاوي!

لمسة جميلة بالـ CSS، أيقونة لإنتظار تحميل للصورة الكبيرة!

فكرت بهذه الطريقة منذ فترة، ورأيتها في أكثر من موقع منذ مدة، ولا أدري بالضبط كيفية عملها فلم أحاول أن أفتح مصدر الصفحات وأنظر الطريقة، بل فضلت أن أعمل ذلك بنفسي.

الغرض من هذه الطريقة هو وضع أيقونة تشير إلى أن الصورة جاري تحميلها. والفائدة من ذلك أن لا يشعر المتصفح بالملل أثناء مشاهدة الصفحة. بل يرى فيها نوعاً من الحياة .

مثال على تطبيق الدرس لفهم المطلوب:

مثال للدرس: تحميل الصورة الكبيرة بأيقونة بالخلفية

خطوات الدرس

أولاً جهز ملف html، وأجعل محتواه كالتالي (ملاحظة أنصحكم بإستعمال محرر Aptana وهو شغال على وندوز ولكن الأفضل إستخدامه مع أوبونتو/لينوكس):

<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS Image Loading</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    </body>
</html>

وهو محتوى قياسي لملف xhtml-strict فارغ.

وبعدها أكتب الكود التالي داخل وسم <body>:

<img src="Wellcome-vacation.png" alt="صورة" width="200" height="200" class="loading" />

ولا تنسى أن تغير الخصائص تبعاً للصورة عندك ولا تنسى أن تحتفظ بالقيمة class=loading كما هي، لأننا سنستخدمها لاحقاً.

الأمر الأخير وهو المهم:

أضف التالي داخل وسم وهو المسؤول عن عمل التأثير المطلوب <style>:

.loading {
    background: #fff url(bigrotation2.gif) center no-repeat;
    display: inline-block;
    }

أو تستطيع أن تعمل التالي لتحصل على نتيجة كما في المثال (لمسات جمالية فقط) الذي عملته، مع ملاحظة أن الكود يحتوي على ملاحظات تستحق أن تعير إنتباهك لها!:

.loading {
	/* importanat */
	background: #fff url(bigrotation2.gif) center no-repeat;
	display: inline-block;

	/* very useful */
	font-weight: bold;
	text-align: center;
	vertical-align: text-bottom;

	/* just colors and cool stuff */
	border: 2px solid #cc9966;
	margin: 2px;
	color: #000033;
	}

مع التأكيد على الإنتباه أن الصورة bigrotation2.gif يجب أن تكون متوفرة، ولديك الخيار أن تستبدلها بإحدى الصور التالية، مع ملاحظة أنها منشورة تحت الترخيص

Creative Commons Attribution 3.0 Unported License

إنتهى الدرس، وإن كنت نسيت أن تشاهد المثال: شاهده مرة أخرى:

مثال للدرس: تحميل الصورة الكبيرة بأيقونة بالخلفية

التوافقية

هذا الدرس يوفر لك نتيجة ناجحة مع المتصفحات التالية، بغض النظر عن بعض الفروقات البسيطة:

Firefox 3
Internet Explorer 6
Internet Explorer 7
Opera 9

- ملاحظات -

الكاتب: عمر الدليمي, http://www.omardo.com
الدرس منشور في أماكن أخرى، وأنا صاحب الحقوق.
الترخيص: Creative Commons 3.0 – by-sa
للإتصال: أرحب بكافة الملاحظات والنصائح حول ما أكتب: إتصل بي

روابط مفيدة:

وسوم: css, html, تطوير المواقع, دروس, درس

هذه التدوينة ادرجت بتاريخ 2 أكتوبر 2008 في الساعة 11:20 م ضمن تصنيف تطوير المواقع. يمكنك متابعة أي تعليق من خلال RSS 2.0 خلاصات التعليقات. يمكنك ترك تعليق, أو تعقيب من خلال موقعك الشخصي.

التعليقات 9 على “لمسة جميلة بالـ CSS، أيقونة لإنتظار تحميل للصورة الكبيرة!”

الأباتشي علق:
3 أكتوبر 2008 في الساعة 12:24 ص
درس جميل وواضح وننظر المزيد
Br4v3-H34r7 علق:
3 أكتوبر 2008 في الساعة 3:53 ص
جميل جدا.. استفدت من الطريقة و ان شاء الله سأضيفها الى مدونتي في التطوير الثاني للقالب
عمر الدليمي علق:
3 أكتوبر 2008 في الساعة 6:39 م
تعقيب على [الأباتشي]:

تعقيب على [Br4v3-H34r7]:
أنتظر التطبيق ^^
محمد العاني علق:
4 أكتوبر 2008 في الساعة 7:54 م
تسلم اخي بس عندي سؤال حول الترخيص: Creative Commons 3.0 – by-sa

ما هو ؟
عمر الدليمي علق:
5 أكتوبر 2008 في الساعة 3:01 م
تعقيب على [محمد العاني]:
أخي محمد بأختصار هذا الأمر يتعلق بالطريقة التي يحق لك أنت – كزائر – فيها إستخدام محتوى الموقع من نسخ أو توزيع أو تعديل أو بيع ،
وهذه الروابط قد تساعدك:
منظمة الملكية الفكرية العالمية
الملكية الفكرية (تعريف من ويكيبيديا)
احمد حمودة علق:
2 يناير 2009 في الساعة 12:16 ص
جميل جداً لا حقيقي ابداع سوف اقوم باضافتها لمدونتي عند بدايتها ان شاء الله
استكنان علق:
2 مارس 2009 في الساعة 8:13 م
تسلم ويعطيك العافيه
ضيــــاء السيد توفيـــــــق علق:
25 أبريل 2009 في الساعة 1:25 م
عمـــــــــــــــــــــــر انا بحييك من كل قلبى وربنا يوفقك كمان وكمان وبقولك
لــــــــــــــــــــو بطــــــــــــلنا نــــــــــــــحلم نمــــــــــــــــــــــــوت

ضــــــــــــ هارب من الاحزان ــــــــــــــــاء
ولــــ الجبوري ــــاء علق:
7 سبتمبر 2010 في الساعة 11:06 م
تحياتي لك من اعماق قلب اخي عمر الدليمي
اريد منك ان تدلني الى طريق البرمج
ايهما افضل هندسة الحاسوب ام الاتصالات

ولك جزيل الشكر