ایجاد lazy load در جی کوئری

  • منتشر شده در تاریخ

ایجاد lazy load در جی کوئری

در این آموزش , قصد داریم به شما نحوه لود اطلاعات در یک صفحه وب بصورت داینامیک در هنگام اسکرول کاربر نمایش بدیم که به این نوع روش , lazy load یا همان “بارگذاری تنبل” می گویند.

ما از jQuery و AJAX برای لود داینامیک هنگام scroll و ایجاد lazy load در جی کوئری بهره می بریم. در مقاله آموزشی قبلی نحوه لود داینامیک داده ها را دیدیم .

همچنین ما تعداد نتایج محدودی برای لود صفحه را نمایش خواهیم دادیم .بقیه نتایح فقط هنگام اسکرول صفحه به پایین با استفاده از هندلر AJAX نمایش داده می شود.

 

هندلر رویداد اسکرول بصورت AJAX

هندلر رویداد جاوااسکریپت

برای بارگذاری رکورد بعدی , باید بدانیم که آیا اسکرول به پایین صفحه رسیده است یا خیر . هندلر رویداد جاواسکریپت زیر در صورتی که اسکرول صفحه به پایین برسد , درخواست AJAX را اجرا می کند.

تابع اجکس AJAX

تا زمانی که کاربر اسکرول می کند, درخواست AJAX تا زمانی که به آخرین سطر از داده های مورد نظر در دیتابیس برسد , اجرا می شود .

تابع AJAX زیر به شما نحوه فراخوانی داده ها از سمت سرور و نمایش آن را , نشان می دهد.

ایجاد lazy load در جی کوئری

صفحه PHP

صفحه PHP ای که هنگام اسکرول کاربر به پایین صفحه توسط درخواست AJAX فراخوانی می شود .

از آنجایی که قبلا نحوه ساخت صفحه بندی AJAX را دیدیم , با اسکریپت PHP بالا تا حدودی آشنا هستیم .

در حال حاضر کد php بالا در هر بار اجرای رویداد اسکرول , ۱۰ سطر را خوانده و برگشت می دهد .

 

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی