در حال حاضر دغدغه‌ی بسیاری از وبمسترها بالابردن سرعت لود یا پایین آوردن حجم صفحات وبسایت هست که نتیجه‌ی هر دو جلب رضایت کاربر و افزایش میزان بازدید است. حالا فرض کنید که این وبمستر بخت برگشته ساکن ایران باشه و البته اکثر بازدیدکننده‌هایش هم ساکن ایران باشند. در اینصورت بالا بردن سرعت لود وبسایت یک کار اساسی برای بنا کردن یک سایت محسوب می‌شود. تکنیک های زیادی برای افزایش سرعت لود وجود دارد که اکثر آنها به واسطه‌ی کم کردن حجم صفحه و فایل‌های پیوست شده به صفحه این کار را انجام می‌دهند.طی این پست و پست‌های آینده ترفندهایی که برای افزایش سرعت لود صفحه استفاده می‌شوند, ارائه می‌شود. بنابراین همراه ما باشید.

لود غیرهمزمان(کند,تنبل) یا به اصطلاح lazy loading  برای تصاویر صفحه:

برای پیاده‌سازی این تکنیک از یک پلاگین که برای جی‌کوئری نوشته شده استفاده می‌کنیم.
روش کار این تکنیک به اینصورت است که هنگام لود صفحه , جاوااسکریپت لینک تمامی عکسها رو از دیدbrowser  مخفی می‌کند و  فقط هر عکسی که در کادر browser , بدون نیاز به اسکرول کردن صفحه, دیده شود , لود می‌شود. و در زمان اسکرول کردن صفحه , هر عکس لود نشده‌ای که در کادر browser  قرار بگیرد , همان لحظه لود می‌شود.
به این ترتیب تمام تصاویر موجود در صفحه به طور همزمان لود نمی‌شوند و در نتیجه سرعت لود صفحه بالا می‌رود و در مواردی حتی سرعت لود چندین برابر می‌شود.
برای مثال می‌توانید به آدرس زیر مراجعه کنید و بعد از لود شدن سایت شروع به اسکرول کردن کنید و به نحوه‌ی لود شدن تصاویر توجه کنید.

http://deanhume.com/Home/BlogPost/set-up-iis-7-to-run-a-secure-site-locally---https/21

برای شروع ابتدا پلاگین jquery.lazyload.js را از اینجا دانلود میکنیم.

حالا هم جی‌کوئری و هم lazyload را به صفحه اضافه می‌کنیم:

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

در انتها پلاگین  lazyload را برای تصاویر صفحه فراخوانی می‌کنیم:

<script type="text/javascript" language="JavaScript">

            $(function(){

                $("img").lazyload();

                  });           

</script>

این عبارت :

$("img").lazyload();

به این معنی است که این پلاگین  را بر روی تمام تگهای img اعمال کن.
شاید زمانی که از این تکنیک به شکل بالا استفاده کنید لود شدن تصاویر در هنگام اسکرول کردن را حس نکنید. اما برای لود شدن تصویر افکت های در نظر گرفته شده که با تعیین آنها این احساس که عکس ها در همان لطظه‌ی اسکرول کردن لود می‌شوند , بیشتر احساس می‌شود.
این افکت به صورت زیر تعیین می‌شود:

$("img").lazyload({effect: "fadeIn"});

در اینصورت وقتی که تصویر داخل محدوده‌ی قابل رویت مرورگر قرار بگیرد به آرامی ظاهر می‌شود.

تنظیمات دیگری برای این پلاگین وجود دارد که می‌توانید با مراجعه به وبسایتهای زیر از آنها مطلع شوید.

http://www.appelsiini.net/projects/lazyload

https://github.com/tuupola/jquery_lazyload