أضافة تأثير تحميل الصور لمدونات بلوجر

عبدو تكنولوجي - Abdou Technologie

19 مارس 2018

أضافة تأثير تحميل الصور لمدونات بلوجر

السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي شرح اليوم على اضافة تاثير تحميل على الصور في المدونة حيث هذه الاضافة تجعل المدونة اكثر سرعة و سلاسة

لأضافة الكود ما عليك سوى البحث على </body> ووضع هذا الكود فوقه مباشرة

<script type='text/javascript'>
/* <![CDATA[ */
// Lazy Load
(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://d.top4top.net/p_799y1kxu1.gif",effect:"fadeIn",threshold:"0"})});

/* ]]> */
</script>

الان احفظ القالب و مبروك عليك الاضافة
اذا اعجبك شرح اليوم لا تنسى الاشتراك في المدونة من هنا لدعمي على تقديم المزيد

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

غير معرف 20 مارس 2018 في 8:54 ص

اخي عبدو ممكن وضع معاينة للاضافة و شكرا
- عبدو تكنولوجي - Abdou Technologie 20 مارس 2018 في 8:00 م
  
  يمكنك المعاينة من مدونتي فقط

جيك برو | Geek Pro 20 مارس 2018 في 4:40 م

لو سمحت اخي عبدو في مشكله بالاضافه
- عبدو تكنولوجي - Abdou Technologie 20 مارس 2018 في 8:01 م
  
  نعم تفضل كيف تضهر معك ؟

غير معرف 21 مارس 2018 في 10:04 ص

اخى تظهر لى رسالة خطا عند حظ القالب
- عبدو تكنولوجي - Abdou Technologie 21 مارس 2018 في 12:54 م
  
  نعم اخي لاكن تم تحديث التدوينة وتم اصلاح الكود

تطبيقي بلس 29 مارس 2018 في 10:52 ص

اخي زكاتك شو صار بخصوص القائمة الجانبية
- عبدو تكنولوجي - Abdou Technologie 29 مارس 2018 في 11:46 ص
  
  حددلي فقط كيف تريدها انت ؟ هل تريدها ظاهرة و عندا الضغط على زر تختفي او تريدها مختفية و عندا الضغط على زر تظهر ؟

Unknown 28 أبريل 2018 في 2:34 م

موضوع رائع كالعادة اخي ^_^ ، ولكن هل يوجد طريقة لجعل الاضافة لا تعمل ع صور المشاركات الشائعة ؟ :(
- عبدو تكنولوجي - Abdou Technologie 28 أبريل 2018 في 6:07 م
  
  نعم اين تريدينها تعمل فقط ؟

برمجة وتصميم 25 فبراير 2019 في 2:40 م

(y)