تسريع مدونة بلوجر عبر سكربت Image Lazy Load Script

2

تسريع مدونة بلوجر من اهم العوامل التى تبقى الزائر بموقعك اطول فترة ممكنة ،لذا فإن تسريع مدونة بلوجر بمختلف الطرق من العوامل التى ترفع من قيمة مدونتك وتجعل الزائر يفضل الدخول لها مرات ومرات وخصوصا لو كانت غنية بالمحتوى.
فلنفترض أن مدونة بلوجر موضوعاتها خاصة بالصور الدقيقه والعالية الجوده ،فبالتأكيد ستكون بطيئه ممايجعل الزائر لاينتظر الدقائق حتى تفتح المدونة وينظر لمحتواه ،فتراه على الفور انتقل لمحرك البحث جوجل مثلا وبحث عن موقع آخر يكون سريع الفتح،وهذا مانسعى الية اليوم لتسريع مدونة بلوجر لأقصى حد.
إقرأ أيضا: شرح كود Lazy Load لتسريع مدونة بلوجر بطريقة ممتازة
أيضا: كيفية تقليل حجم الصور فى المشاركات لتسريع مدونتك بلوجر
فلتسريع مدونة بلوجر سنستخدم سكربت رائع أسمة Image Lazy Load Script ،وظيفته تأخير ظهور الصور تباعا والاسراع بظهور المحتوى النصى فى البدايه ثم تظهر الصور تباعا عند التمرير لأسفل.

تسريع مدونة بلوجر ،ماهو سكربت Image Lazy Load Script والمستخدم فى تسريع مدونة بلوجر؟

تسريع مدونة بلوجر عبر سكربت Image Lazy Load Script  ،هو برنامج نصي يمنع تحميل الصور في الصفحة حتى تقوم بالتمرير لأسفل. الفكرة الأساسية هي تحميل الصور أو iframe فقط عندما يحتاج المستخدمون إلى عرضها. وبهذه الطريقة ، لن يتعين عليك الانتظار حتى يتم تحميل جميع العناصر الموجودة في الصفحة وبالتالي يمكنك البدء في استخدام صفحة الويب في وقت أسرع. سيرى المستخدم فقط الصور الأساسية بالجزء العلوى حين فتح الصفحة المراد الاطلاع عليها من موقعك أمالباقي سيأتي بمجرد التمرير لأسفل.

كيف يعمل سكربت Image Lazy Load Script؟

هو يعتمد على عمل حاجز شفاف على الصور وتفتح حين مرور الماوس عليها ممايجعل ظهور المحتوى النصى أسرع وكذلك ظهور الصور حسب الطلب فى مستوى الرؤيا ممكا يسرع من مدونتك.

طريقة تركيب سكربت Image Lazy Load Script بمدونة بلوجر.

عليك اولا الدخول الى قالب مدونتك من خلال لوحة تحكم مدونتك على بلوجر،ثم  تحرير HTML .
لاتنسى اخد نسخة احتياطية من قالب مدونتك.
– اضغط عبر لوحة المفاتيح أو الكيبورد على Ctrl + F ثم ابحث عن كود </head>
– فوقة مباشرة قم باضافة كود سكريبت Image Lazy Load Script  التالي :

<script type='text/javascript'>
// Jquery LazyLoad Script by www.seo-blogger.info
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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:"https://4.bp.blogspot.com/-oA8G9t61JXk/VtLrtkAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

 

أتمنى أن اكون قد وفقت فى الشرح
مع خالص تحياتى لك

تعليق
  1. Abdallah Abueltaib يقول

    شكرا لك ولاكن هل يعمل على الصفحة الرئيسية فقط ام على المواضيع داخل المدونة ؟

    1. aldewaghry يقول

      اهلا بك اولا
      ثانيا نعم هذا الكود يعمل على كامل المدونه لكن هناك اجراءات مكمله مع الكود افضل انك تطلع عليها وتطبقها على مدونتك .
      تجد الشرح فى اول المشاركه بالاعلى وهما ( الروابط بالمشاركه بالاعلى )
      إقرأ أيضا: شرح كود Lazy Load لتسريع مدونة بلوجر بطريقة ممتازة
      أيضا: كيفية تقليل حجم الصور فى المشاركات لتسريع مدونتك بلوجر
      تحياتى لك

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More