تسريع الموقع ب 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>