[ Jquery ] تسريع الموقع وتحميل الصور عبر إضافة Lazy Loading Images

بسم الله الرحمن الرحيم

السلام عليكم ورحمه الله وبركاته

[ Jquery ] تسريع الموقع وتحميل الصور عبر إضافة Lazy Loading Images

اضافة Lazy Loading Images هي من الاضافات الضروريه بكل موقع حقيقة , وفائدة الاضافة انه عند تصفح الموقع لايتم تحميل كل الصور دفعة واحده لان ذالك قطعياَ سيتسبب في ثقل كبير اثناء التصفح مع بطئ , الاضافة تقوم اولا بجعل المحتوى المرئي محمل , ثم تقوم بتحميل باقي الصور في الخلفية , وهذا يساعد بشكل كبير في زيادة سرعة تصفح الموقع لان ليس جميع الصور يتم تحميلها في آن واحد.

اولاَ : قارن سرعة مدونتك قبل وبعد الاضافة من خلال هذه الموقعين :

طريقه التركيب

1. ادخل مدونتك.

2. القالب.
3. حرر القالب.
4. ابحث عن </head>
5. الصق هذا الكود قبله (فوقه)

<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery('img').lazyload({
effect:"fadeIn",
placeholder: "https://jetara.googlecode.com/svn/trunk/30.gif"
});
});
</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>

عنوان التدوينة: [ Jquery ] تسريع الموقع وتحميل الصور عبر إضافة Lazy Loading Images
تقييم : 10 من 10 مرتكز على 24 تقييم.
الكاتب / محمد عصام

عدد المشاهدات :

Mohamed Esam

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