أخر الاخبار
دروس بلوجر
0

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

Yhia
اخر تحديث :
سرعة مدونة بلوجر من اهم العوامل التى تبقى الزائر بموقعك اطول فترة ممكنة ،لذا فإن تسريع مدونة بلوجر بمختلف الطرق من العوامل التى ترفع من قيمة مدونتك وتجعل الزائر يفضل الدخول لها مرات ومرات وخصوصا لو كانت غنية بالمحتوى.
فلنفترض أن مدونة بلوجر موضوعاتها خاصة بالصور الدقيقه والعالية الجوده ،فبالتأكيد ستكون بطيئه ممايجعل الزائر لاينتظر الدقائق حتى تفتح المدونة وينظر لمحتواه ،فتراه على الفور انتقل لمحرك البحث جوجل مثلا وبحث عن موقع آخر يكون سريع الفتح،وهذا مانسعى الية اليوم لتسريع مدونة بلوجر لأقصى حد.
إقرأ أيضا: شرح كود 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUkm86wqtduejtOYvFWa8Mzm6fl3cvGOpUcboSyU1JPeGS6FoXo1IZIME42Z3U7oqHNr9eRHCozyegOE6dH3Vp7NcBgqQdaEPZRZtGRLfjQavTAiQ4a9JyTtYr-Cqjt8Mq1JvaJKjk2k/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

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

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات
إرسال تعليق

اترك لنا رأيك او تعليقك او فكره مميزه




    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -