الثلاثاء، 7 يناير 2014

اجعل تصفح موقعك أو مدونتك أسرع مع

        موقعك أو مدونتك أسرع
                    معjQuery Lazy Laod

أسرع, تحميل, تصفح, مدونتك, موقعك, يسرع, 












 يسرع تحميل و تصفح موقعك
و طريقة عمل هذه الإضافة يتلخص في
 كونها تجعل  المتصفح يحمل ما يراه في الشاشة أولا

 من المعايير المهمة في تقييم المواقع و المدونات
 هو سرعة تصفحها و تحميلها من طرف المتصفح..
 الا أن أغلب المواقع التي تحتوي على مواضيع طويلة أو صور كثيرة تعاني من بطء سرعة تصفحها..
هذه الإضافة الممتازة لتسريع تصفح المدونات أو أي موقع على حد سواء..
ثم تكمل بقية الصور و المحتويات عند النزول الى الاسفل أو الصعود في الموقع..
فمثلا عند تصفح صفحة ما ستلاحظ و أنت تنزل إلى أسفل الصفحة أن الصور و المحتويات تظهر تباعا بطريقة سلسة.
 باختصار الإضافة تتيح تحميل ما يظهر على الشاشة و ليس صفحة الموقع كلها  و ستلاحظ تأثير الإضافة بشكل أدق.
طريقة تركيب الإضافة بسيطة و سهلة ،



 و تكون بإضافة الكود الآتي فوق (قبل) وسم

 </body>

هذا الكود لتطبيق الإضافة على كافة صور الموقع


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonfJak9x6QoNEbIjnD87fspUlIVRwOBxWIg9G_fEyUSi4Vpe3kI9HINuqWeXsOS5I2bmoE3MWsXENpNExgTIHdRrWwya3BneBZeO0naSkN-KoBVQIZeIWkpy10IizSBX6d4FUxAZSV1A/&quot;
});
});
</script>


تخصيص الإضافة

لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.
فمثلا في بلوجر نطبق الإضافة على .post
 نستعمل الكود كما يلي:



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.post img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonfJak9x6QoNEbIjnD87fspUlIVRwOBxWIg9G_fEyUSi4Vpe3kI9HINuqWeXsOS5I2bmoE3MWsXENpNExgTIHdRrWwya3BneBZeO0naSkN-KoBVQIZeIWkpy10IizSBX6d4FUxAZSV1A/&quot;
});
});
</script>


و في ووردبريس نطبق الإضافة على #post-blog كما في الكود الآتي:



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('#post-blog img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonfJak9x6QoNEbIjnD87fspUlIVRwOBxWIg9G_fEyUSi4Vpe3kI9HINuqWeXsOS5I2bmoE3MWsXENpNExgTIHdRrWwya3BneBZeO0naSkN-KoBVQIZeIWkpy10IizSBX6d4FUxAZSV1A/&quot;
});
});
</script>


و في المنتدياتtborder يصبح الكود كالآتي على :


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.tborder img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonfJak9x6QoNEbIjnD87fspUlIVRwOBxWIg9G_fEyUSi4Vpe3kI9HINuqWeXsOS5I2bmoE3MWsXENpNExgTIHdRrWwya3BneBZeO0naSkN-KoBVQIZeIWkpy10IizSBX6d4FUxAZSV1A/&quot;
});
});
</script>


انتظر تعليقاكم
تقبلو تحياتى
مختارات


اداة مواضيع ذات صلة بأشكال متعددة



أسرع, تحميل, تصفح, مدونتك, موقعك, يسرع, 





0 التعليقات :

إرسال تعليق