طريقة تسريع تحميل صفحات المدونة مع اضافة jQuery Lazy Load

 موضوع اليوم في غاية الأهمية بالنسبة لأصحاب المواقع و المدونات الشخصية

اضافة جديدة تمكنك من تسريع تحميل الصور في مدونتك و بالتالي تسريع التصفح.

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

طريقة تركيب الإضافة

و تكون بإضافة الكود الآتي فوق (قبل) وسم </body> المغلق:
هذا الكود لتطبيق الإضافة على كافة صور الموقع أو المدونة.

<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/AVvXsEjzUIZRyc7Pa4ONj9z2mrziW-fQQR0eMkWHgIVPolpDKOdOvlumvmcsF5GFZrBJv5koU7iSV_hBNMOvz64KM7YxWByyPCjVLhJ0brVmwi9mJ6lCYVKKPlUcpxYo2F7MMuKDN9yStj1TahU/&quot;
});
});
</script>

ملاحظة

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

 تنويه

لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.

فمثلا في بلوجر نطبق الإضافة على .post نستعمل الكود كما يلي:

<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('.post img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUIZRyc7Pa4ONj9z2mrziW-fQQR0eMkWHgIVPolpDKOdOvlumvmcsF5GFZrBJv5koU7iSV_hBNMOvz64KM7YxWByyPCjVLhJ0brVmwi9mJ6lCYVKKPlUcpxYo2F7MMuKDN9yStj1TahU/&quot;
});
});
</script>

و في المنتديات على .tborder يصبح الكود كالآتي:

<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('.tborder img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUIZRyc7Pa4ONj9z2mrziW-fQQR0eMkWHgIVPolpDKOdOvlumvmcsF5GFZrBJv5koU7iSV_hBNMOvz64KM7YxWByyPCjVLhJ0brVmwi9mJ6lCYVKKPlUcpxYo2F7MMuKDN9yStj1TahU/&quot;
});
});
</script>

بالتوفيق للجميع