تسريع الموقع ب JQuery وتحميل الصور بخاصية lazy loading images

حاليآ نعاصر جيل جديد في عالم الانترنت في كل زوايا الويب. المستخدم يعشق الامور بشكل سريع لا يحب البطئ ويكره ما يتسمى ببطئ أو تأخير لهذا المواقع الاكترونية دائمآ تجعل قدر مستطاع تجعل تصميمها سريع وكلنا نعلم ان الزائر هو عابر سبيل ان زار موقعك وأعجب به سيعود مجددآ وسرعة تصفح الموقع تلعب دور كبير في هذا الشأن اما ان كان الموقع بطئ وممتلئ بأكواد ليس لها منفع سوا تبطيئ الموقع فمن الاكيد ستلاحض أن موقعك يفتقد لزوار وان كان هناك زوار فهم ذو زيارة الواحده بمعنى ان سرعة موقعك بطيئة جدآ وكنصيحة أخرى لك بين قوسين ان احد اسرار نجاح المواقع هي ( سرعة التصفح ) .

سابقآ الاستاذ Jetara عبد الله الحاربي صاحب مدونة حلول بلوجر قد طرح الموضوع سابقآ من هنا واحببت ان اشاركة معكم هنا حول طريقة تسريع الموقع من خلال كود جيكوري وتحميل الصور بخاصية lazy loading images

أولا شاهد سرعة موقعك قبل التطبيق وشاهدها بعد التطبيق من خلال مواقع التالية :

gtmetrix.com

google page speed

الان سنطرق عملية تركيب :

ادخل مدونتك.

 القالب.

حرر القالب.

ابحث عن </head>  الصق هذا الكود قبله :

<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery(&#39;img&#39;).lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://jetara.googlecode.com/svn/trunk/30.gif&quot;
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.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);
//]]>
</script>