ما هو كود lazy-loading؟
بالمعني الحرفي التحميل الكسول: عبارة عن تقنية تؤجل تحميل الموارد غير الهامة في وقت تحميل الصفحة. بدلاً من ذلك ، يتم تحميل هذه الموارد غير الحرجة وقت الحاجة. عندما يتعلق الأمر بالصور ، غالبًا ما تكون كلمة "غير انتقادية" مرادفة لـ "خارج الشاشة". إذا كنت قد استخدمت Lighthouse وفحصت بعض فرص التحسين ، فربما تكون قد رأيت بعض الإرشادات في هذا المجال في شكل.
ربما تكون قد رأيت بالفعل lazy-loading أثناء تصفح هذه المدونة، وهو شيء كالتالي:
تصل إلى صفحة وتبدأ في التمرير وأنت تقرأ المحتوى. في مرحلة ما ، تقوم بتمرير صورة مشوشه في منفذ العرض. ثم يتم استبدال صورة العنصر النائب فجأة بالصورة النهائية.
طريقة إضافة كود lazy-loading الي مدونة بلوجر.
(يفضل الاحتفاظ بنسخة إحتياطية من المدونة قبل وضع الكود)
1.قم بالدخول الي مدونة بلوجر.
2.قم بالدخول الي المظهر.
3.اضغط علي الثلاث نقاط ثم إختر تعديل HTML.
4.إنقر نقرة واحدة وسط الاكواد ثم قم بالبحث عن طريق الضغط علي CTRL + F.
5. قم بالبحث عن الوسم </body> ثم ضع فوقه الكود الثالي:
<script type='text/javascript'> // Jquery LazyLoad Script by www.Bloggersstand.com //<![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/AVvXsEgK-XTqYY7Ldh9HJ4T6Z-qPsHmDW96FUH76iugjdEbryKpMB2hwWpY23xrGGmLVrwv0pk_lKMVIkyvWhoC6utPj2nqS1uo0AIx8IhbF-JEyO2UiL9LrBCER57WPrKpmYXwVWcaqJaE3hzo/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>
6.ثم بالنقر علي حفظ.
5. قم بقياس سرعة المدونة بعد دقائق من حفظ القالب.