طريقه إضافه عرض مواضيع المدونه بتقنيه جكويري (jquery) في 1:40 م

كيفيه إضافه عرض المواضيع بتقنيه جاكيري (jquery)علي المدونات والمواقع,تقنيه(jquery)للمدونات والمواقع.شرح إضافة جكويري (jquery)للمدونات والمواقع,

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

تقوم بإضافة الكود الآتي فوق (قبل) وسم </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/AVvXsEho_DjO5RQZFCiLPhuQvSvAuPqo0To6fJsP3jNAxF7nA7229kDgIMi9HB9AZNQPlwprO5cUWSMOJLQeOnFjV1Gtj5rCeEj1NHIlbZvIMcrJllmXJtMk6-Gr5LNxopED7otsjH2hMzFdhnc/&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/AVvXsEho_DjO5RQZFCiLPhuQvSvAuPqo0To6fJsP3jNAxF7nA7229kDgIMi9HB9AZNQPlwprO5cUWSMOJLQeOnFjV1Gtj5rCeEj1NHIlbZvIMcrJllmXJtMk6-Gr5LNxopED7otsjH2hMzFdhnc/&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/AVvXsEho_DjO5RQZFCiLPhuQvSvAuPqo0To6fJsP3jNAxF7nA7229kDgIMi9HB9AZNQPlwprO5cUWSMOJLQeOnFjV1Gtj5rCeEj1NHIlbZvIMcrJllmXJtMk6-Gr5LNxopED7otsjH2hMzFdhnc/&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/AVvXsEho_DjO5RQZFCiLPhuQvSvAuPqo0To6fJsP3jNAxF7nA7229kDgIMi9HB9AZNQPlwprO5cUWSMOJLQeOnFjV1Gtj5rCeEj1NHIlbZvIMcrJllmXJtMk6-Gr5LNxopED7otsjH2hMzFdhnc/&quot;
});
});
</script>

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

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

abuiyad