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