آموزش lazy load jquery تصاویر (لیزی لود در جی کوئری)

lazy load

زمان مطالعه

2 دقیقه

تعداد بازدید

202

تعداد پرسش ها

1

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

آموزش lazy load jquery تصاویر (لیزی لود در جی کوئری)

lazy load

زمان مطالعه

2 دقیقه

تعداد بازدید

202

تعداد پرسش ها

1

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

lazy load چیه  و به چه دردی میخوره ؟

lazy load به شما امکان می‌دهد تا یک وب‌سایت سنگین تصویری را به راحتی  ارائه دهید، بدون اینکه مجبور باشید از همه واکشی‌های اولیه و بارگیری تصاویری که ممکن است هرگز توسط کاربر دیده نشوند، رنج ببرید.

لیزی لود  به ویژه برای وب سایت های تک صفحه ای و ویه سایت هایی که آگهی ارایه میدهند و تصاویری زیادی دارند که بسیار مفید است. لیزی لود یا به ترچمه فارسی ( لود تنبل) هنگام اسکرول یک صفحه وب به ترتیت تصاویر لود میشود.

حالا چه طوری توی وب سایت خودمون با فرانت jquery  استفاده کنیم؟

ابتدا باید تگ اسکریپت Jquery را به صفحه html خودتون وصل کنید؛ کد زیر را در script خودتون کپی کنید :

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

 از cdn هم امکان استفاده دارید که میتوانید از همینجا کپی کنید:

https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js

حال باید تغییراتی در تگ img خود ایجاد کنید ، میتوانید از کد زیر استفاده کنید :

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

کد فوق برگفته از وبسایت رسمی jquery میباشد.

حال یک تگ اسکریپت بسازید و از کد زیر برای کلاس lazy استفاده کنید:

$("img.lazy").lazyload();

از دنیای برنامه نویسی لذت ببرید!

در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."


پرسش و پاسخ
1
کاربر عشق یادگیری
1 ماه پیش

ابهام

احساس می‌کنم توضیحات بیشتری نیاز داره مثلا برای همه سایت ها کار میکنه؟ دقیقا کد رو کجا بزاریم

دوره پیشنهادی
دوره پیشنهادی