تحميل/ظهور الصور بعد المرور عليها (يساعد على سرعة تحميل الصفحة مثل google images)

[romaissa]

http://www.dzbatna.com/images/icons/idea.gif [lazy load vbulletin] ط¸ظ‡ظˆط± ط§ظ„طµظˆط± ط¨ط¹ط¯ ط§ظ„ظ…ط±ظˆط± ط¹ظ„ظٹظ‡ط§ (ظ…ط«ظ„ google images) (http://www.dzbatna.com/t1682958/)



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

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

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

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

للتركيب install:
١- قم بتحميل المرفقات (٢ ملف في مجلد clientscript)
٢- قم بالذهاب إلى قالب template (headinclude)
٣- إبحث عن:



رمز PHP:

<code style="white-space:nowrap"> <code> <script type="text/javascript" src="{vb:stylevar yuipath}/yuiloader-dom-event/yuiloader-dom-event.js?v={vb:raw vboptions.simpleversion}"></script>
</code> </code>

أضف فوقه:
(في حال رغبتك بظهور الصور بدون تأثير أضف هذا الكود code) http://www.dzbatna.com/images/smilies/icon-mos.gifhttp://www.dzbatna.com/images/smilies/icon-mos.gif
رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>

(في حال رغبتك بظهور الصور بتأثير الـ fade-in أضف هذا الكود code) http://www.dzbatna.com/images/smilies/icon-mos.gifhttp://www.dzbatna.com/images/smilies/icon-mos.gif
رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>


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

رابط المثال: http://zeqiod.webs.com/lazyload.html

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


وسلامتكم
http://www.dzbatna.com/images/smilies/bigsmile.gif







التعديل الأخير كان بواسطة zeqiod; 28 - 09 - 2014 الساعة 19:38

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif lazyload-zeqiod.zip (http://www.traidnt.net/vb/attachments/521322d1285679725-lazyload-zeqiod.zip) (2.6 كيلوبايت, عدد مرات المشاهدة 136 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©