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();
از دنیای برنامه نویسی لذت ببرید!
آموزش Web Workers API در html
آموزش استفاده از بوت استرپ (bootstrap) در ری اکت (react.js)
آموزش Disavow بک لینک های اسپم و مخرب
آموزش جامع ثبت مکان در گوگل مپ (Google Map)
آموزش طراحی قالب اینستاگرام + معرفی ابزار
آموزش افزونه imagify (فشرده سازی و کم کردن حجم تصاویر) + دانلود
آموزش Drag And Drop (کشیدن و رها کردن) عناصر در HTML
آموزش کامل سایز پست و استوری اینستاگرام
آموزش افزایش دامین اتوریتی سایت + مشاوره و سفارش
آموزش نحوه گرفتن اینماد (نماد اعتماد الکترونیکی)
احساس می‌کنم توضیحات بیشتری نیاز داره مثلا برای همه سایت ها کار میکنه؟ دقیقا کد رو کجا بزاریم
