الآن || سرع تصفح مدونتك و موقعك مع إضافة 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/AVvXsEiQ7RkVsQjkq1HSMJ8rNwwURYJ7NxeMCDaxt6fGNyAsdSyVFKmz9Inw3_EcjwokClL9OxOrHNtAFpqotUals4RhKIl7UVt8hPIUxhECLjsf-xFZOYpljuqdCDvZWUuDC2Qf5mSIskIKWHE/&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/AVvXsEiQ7RkVsQjkq1HSMJ8rNwwURYJ7NxeMCDaxt6fGNyAsdSyVFKmz9Inw3_EcjwokClL9OxOrHNtAFpqotUals4RhKIl7UVt8hPIUxhECLjsf-xFZOYpljuqdCDvZWUuDC2Qf5mSIskIKWHE/&quot;
});
});
</script>

• و في ووردبريس نطبق الإضافة على #post-blog كما في الكود الآتي :
  

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

و لمن يملك بعض الخبرة و الدراية في هذا المجال

يمكنه تخصيص الإضافة و تعديلها عبر متابعة موقع تطويرها.