الدرس 42: تسريع وتحسين تحميل صور مواضيع مدونة بلوجر عبر سكريبت lazy load images

شرح كيفية التسريع و التحسين من تحميل مواضيع مدونة بلوجر عبر سكريبت Script lazy load images لتحفيف من تحميل صور المدونة و تسريع تصفحها مع اضافة مؤثرات جدابة على مدونة Blogger

السلام عليكم اخوانى زوار و متتبعي مدونة علوم و تقنيات فى درس جديد على قسم دورة انشاء مدونة بلوجر احترافية , فى درس من دروس بلوجر قدمنا موضوع نشرح فيه طريقة تسريع مدونة بلوجر عبر ضغط الصور و الاكواد تجد الدرس من : هنا .
فى هذا الدرس ان شاء الله سنقدم لكم طريقة اخرى وفعالة لتحسين سرعة مدونة بلوجر و هذا عبر اضافة سكريبت lazy load images .
يقوم هذا السكريبت ببساطة بجعل تحميل الصور المدرجة فى مواضيعك تظهر واحدة تل و الاخرى اي يقوم هذا السكريبت باظهار الصور الظاهرة على اطار الشاشة و عندما يقوم الزائر بالنزول الى اسفل الصفحة تبدا الصور الاخرى بالظهور له , يعني المتصفح لا يقوم بتحميل جميع الصور دفعة واحدة حتى يقلل الضغط فى وقت التحميل على مدونتك و يجعل مدونتك تحمل بسرعة على المتصفح.

مزايا سكريبت lazy load images 

- تحميل الصور بالتدريج على مدونتك ( يتم تحميل فقط الصورة التي يتم عرضها حاليا من قبل الزوارعلى الشاشة ).
- التخفيف من الضغط على مدونتك.
- التصفح السريع على مدونة بلوجر.
- يقدم مؤثرات جدابة على مدونة بلوجر.

كيفية تركيب سكريبت lazy load images 

- اولا الدخول الى قالب مدونتك , ثم الى تحرير HTML ,  لاتنسى اخد نسخة احتياطية من قالبك
- اضغط عبر لوحة المفاتيح Ctrl + F ثم ابحث عن كود </head>
- فوقة مباشرة قم باضافة كود سكريبت lazy load images  التالي :
<script type='text/javascript'>/* by : www.arabes1.com */ //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]> /* by : www.arabes1.com */ </script>
- و فى الاخير قم بالحفظ و مبروك عليك
من هنا شرح بالفيديو طريقة عمل سكريبت lazy load images و كيفية تركيبه
لاتنسى تقييم الموضوع بتعليق .. شاركه مع اصدقائك للافادة

تعديل المقال