اجعل تحميل صفحات مدونتك/موقعك أسرع باستخدام إضافة jQuery Lazy Load

يعتبر موضوع اليوم مُهِمًّا جدا وذلك لأنه جاء بأحسن طريقة للتخلص من بطئ تحميل صفحات المدونات و المواقع، و الذي يعاني منه أغلب المدونين خصوصا الذين يستعملون الصور.

هذه الحل هو عبارة عن إضافة مكونة من كود jQuery يطيق عليها اسم "jQuery Lazy Load"، وتقوم هذه الإضافة على تحميل ما يظهر في المتصفح أولاً من عناصر وصور، ثم بعد ذلك يتم تحميل باقي المحتويات بمجرد النزول إلى أسفل الصفحة بكيفية متسلسة.

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

لتركيب إضافة jQuery Lazy Load اتبع الخطوات التالية :

1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *

2- أنقر على "Ctrl + F" و ابحث عن </head> ثم انسخ فوقه الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQT_yjE-fOgRgqwIJcil9KEN6MxTJq8qUxIq9QeKSlSg2R-2Inhy_LYJMRcbL32mhMAEBQBX2KKq2UQMWjJl-m_krvqQ8uogi2rUCEsXRl5E4o_897PeJZBezlUoFjpiyhFKk_uIPoxU/&quot;
});
});
</script>

3- نقوم بالتعديل على الكود حسب الرغبة بالشكل الآتي :

* إن كنت تستعمل مكتبة jQuery فيما سبق على مدونتك، فإنك لست مجبراً على نسخ السطرالملوَّن بالأحمر.

* كما هو موضح في السطر الملون بالأزرق فالإضافة تم تطبيقها على img (أي الصور فقط).
و لتطبيقها عنصر الموضوع أو التدوينة أو أي عنصر آخر، فقط يكفي أن تضيف class أو id العنصر المراد التطبيق عليه، وذلك حسب المثال الآتي :
 
مثال على البلوجر نستبدل السطر الأزرق بما يلي :

jQuery('.post img').lazyload

مثال على المنتديات نستبدل السطر الأزرق بما يلي :

jQuery('.tborder img').lazyload

4- وفي الأخير لا تنسى حفظ القالب.


*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...