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

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

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

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

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

140

پرسش و پاسخ

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

حالا چه طوری توی وب سایت خودمون با فرانت 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();