lazy load vbulletin] ظهور الصور بعد المرور عليها (مثل google images)

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

أعتقد أن جميعكم رأى هذي البرمجة وخصوصاً في Google images
بأن الصور لا تظهر إلى في حال مرورنا عليها
والبرمجة منتشره ايضاً في صفحات الـ wordpress

وهذا يساعد على تخفيف الضغط على الصفحة ويساعد أيضاً على أن يجعل التحميل فقط للمشاركة المراد رأيتها بدل تحميل الصفحة كلها!

حبيت أشاركم في هذي البرمجة لعملها مع منتدياتنا vb4

للتركيب:
١- قم بتحميل المرفقات (٢ ملف في مجلد clientscript)
٢- قم بالذهاب إلى قالب (headinclude)
٣- إبحث عن:
رمز PHP:
<script type="text/javascript" src="{vb:stylevar yuipath}/yuiloader-dom-event/yuiloader-dom-event.js?v={vb:raw vboptions.simpleversion}"></script>



أضف فوقه:
(في حال رغبتك بظهور الصور بدون تأثير أضف هذا الكود)
رمز PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="clientscript/jquery.lazyload.mini.js" type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
$("img").lazyload();
});
</script>


(في حال رغبتك بظهور الصور بتأثير الـ fade-in أضف هذا الكود)
رمز PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="clientscript/jquery.lazyload.mini.js" type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>



* يرجى عدم وضع الكودين ، فقط إختر واحد منهم حسب رغبتك



* لاحظوا هنا شريط تحريك الصفحة للأسفل والأعلى "scroll bar" كيف يتغير شكله ولاحظوا تأثير ظهور الصوره وانت تضغط على زر تحريك الصفحة للأسفل..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]