Lazy Image Loading | كيفية جعل تحميل مدونتك بسرعة البرق باستخدام سكريبت

كيفية جعل تحميل مدونتك بسرعة البرق باستخدام سكريبت Lazy Image Loading

إن حلم كل مدون لهو تحقيق ارتفاع حركة الزوار على المدونة و الحصول على رتبة عالية على أشهر محركات البحث، وهذا جد ممكن إن كنت تعمل بجد وكد على مدونتك و المواظبة على تغذيه باستمرار بمواضيع حصرية وغير منقولة.

إلا أنه في حالة بطئ تحميل محتويات مدونتك فإن عدد ستقل وبذلك لن تحتل المراتب الأولى على محركات البحث، وقد يرجع السبب في بطئ تحميل الصفحات إلى كثرة استخدام الإضافات على البلوجر و احتواء المواضيع على الصور. 

لذا سأقدم لكم في هذا الدرس سكريبت خاص بتحميل جميع الصور الخاصة بمدونتك لجعلها أكثر سرعة من ذي قبل، فبمجرد أن يفتح زوار مدونتك أحد الصفحات سوف يتم تحميل الجزء الظاهر في الشاشة من الوهلة الأولى، وبعد ذلك سيتم تحميل باقي الأجزاء الغير الظاهرة تدريجيا أثناء تمرير الصفحة إلى أسفل و دون أن يلحظ ذلك، وهذا ما يستحسنه زوار مدونتك بالتأكيد.

لتسريع تحميل محتوى مدونتك، اتبع هذه الخطوات السهلة :

1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على تصميم من القائمة الجانبية، و اضغط على تعديل القالب "Edit HTML".
*لا تنسى أخذ نسخة احتياطية من القالب
2- اضغط على CTRL+F للبحث عن السطر التالي :

</head>

3- و ألصق فوقه مباشرة الكود التالي :

<!-- How To Add Lazy Image Loading Script to Blogger -->
<!-- لتسريع تحميل محتوى مدونة البلوجر -->

<!-- Start - www.tumblrselfi.blogspot.com --> <script type='text/javascript'>//<![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/AVvXsEh_o9jB5hqCnc7-rkKy0NsW8lo-76RUCoTcB1uHY41GVI-wen4cQIIKoMt05Fp1XV0UcNpiCxjqts74yTt5j1GFkVOy2U6PzPctpYV9OE2p6T1nRTpMXeoM6ojgQn4_prkwf-zbIF1JfvTe/s1600/grey10-AfkarPro.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script><!-- End - www.tumblrselfi.blogspot.com -->

4- بعد ذلك قم بالضغط على حفظ القالب.
 جرب الدخول إلى مدونتك و استمتع بالسرعة الجديدة.

ملاحظة : 
* إذا كنت تبحث عن سرعة أكبر من التي ستحصل عليها من هذا السكريبت أنصحك بعدم استخدام عدد كبير من الصور على مدونتك و التخلص من كافة الصور غير المرغوب فيها.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفضه

Posted in: اضافات بلوجر