بسم
الله و الحمد لله و الصلاة و السلام على محمد الأمين و على صحبه و آله
الطيبين الطاهرين. السلام عليكم و رحمة الله، في هذا الموضوع سنتعرف و
إياكم على إضافة ممتازة لتسريع تصفح المدونة أو أي موقع على حد سواء، مبدأ
الإضافة يتلخص في تحميل ما يراه المتصفح أولا ثم تحميل بقية الصور و
المحتويات عند الطلب فمثلا عند تصفح صفحة ما ستلاحظ و أنت تنزل إلى أسفل
الصفحة أن الصور و المحتويات تظهر تباعا بطريقة سلسة. باختصار الإضافة تتيح
تحميل ما يظهر على الشاشة و ليس صفحة الموقع كلها الشيء الذي يزيد في سرعة
تحميل و تصفح موقعك.و لمشاهدة مثال حي على الإضافة زر هذه الصفحة
ثم تصفحها نزولا و ستلاحظ تأثير الإضافة بشكل أدق. طريقة تركيب الإضافة
بسيطة و سهلة ، و تكون بإضافة الكود الآتي فوق (قبل) وسم </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 == "iPad") return; jQuery('img').lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_gsN6BWFs0N3kBAUBlzqad9mgFqM4uK_ik8y0FdpvzjZIbTHhubDdRZ_BqMLoPMrv2bYC3mNEEKEjOsRHtKujAXbXB-unN_z52HZyZbeBmLQy70uq6ClOz-LTWCEd4bL9l2pCycCh08/" }); }); </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 == "iPad") return; jQuery('.post img').lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_gsN6BWFs0N3kBAUBlzqad9mgFqM4uK_ik8y0FdpvzjZIbTHhubDdRZ_BqMLoPMrv2bYC3mNEEKEjOsRHtKujAXbXB-unN_z52HZyZbeBmLQy70uq6ClOz-LTWCEd4bL9l2pCycCh08/" }); }); </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 == "iPad") return; jQuery('#post-blog img').lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_gsN6BWFs0N3kBAUBlzqad9mgFqM4uK_ik8y0FdpvzjZIbTHhubDdRZ_BqMLoPMrv2bYC3mNEEKEjOsRHtKujAXbXB-unN_z52HZyZbeBmLQy70uq6ClOz-LTWCEd4bL9l2pCycCh08/" }); }); </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 == "iPad") return; jQuery('.tborder img').lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_gsN6BWFs0N3kBAUBlzqad9mgFqM4uK_ik8y0FdpvzjZIbTHhubDdRZ_BqMLoPMrv2bYC3mNEEKEjOsRHtKujAXbXB-unN_z52HZyZbeBmLQy70uq6ClOz-LTWCEd4bL9l2pCycCh08/" }); }); </script>