لمسة جميلة بالـ 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