مساحة إعلانية

الرئيسية جديد : سرع تصفح مدونتك و موقعك مع إضافة jQuery Lazy Load
الرئيسية / / جديد : سرع تصفح مدونتك و موقعك مع إضافة jQuery Lazy Load

جديد : سرع تصفح مدونتك و موقعك مع إضافة jQuery Lazy Load


طريقة تركيب الإضافة بسيطة و سهلة ، و تكون بإضافة الكود الآتي فوق (قبل) وسم </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;http://lh5.ggpht.com/_XrWO8mEpDy0/TEdXIqjrAUI/AAAAAAAAAkU/3lwqSFT8IRQ/grey.gif&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;http://lh5.ggpht.com/_XrWO8mEpDy0/TEdXIqjrAUI/AAAAAAAAAkU/3lwqSFT8IRQ/grey.gif&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;http://lh5.ggpht.com/_XrWO8mEpDy0/TEdXIqjrAUI/AAAAAAAAAkU/3lwqSFT8IRQ/grey.gif&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;http://lh5.ggpht.com/_XrWO8mEpDy0/TEdXIqjrAUI/AAAAAAAAAkU/3lwqSFT8IRQ/grey.gif&quot; }); }); </script>

و لمن يملك بعض الخبرة و الدراية في هذا المجال يمكنه تخصيص الإضافة و تعديلها عبر متابعة موقع تطويرها.
شارك المقال
إرسال تعليق
جميع الحقوق محفوظة لــ مدونة كل العرب 2018 © تصميم كن مدون