اضافه کردن Lazy Loading به تصاویر با jQuery / قسمت ۱

افزودن این ویژگی بارگزاری تنبل برای تصاویر باعث افزایش سرعت و عملکرد سایت می شود و در آخر سئو سایت بهتر شود. برای اضافه کردن این ویژگی از کتابخانه jQuery Lazy استفاده می کنیم که می توانید در پروژه های غیر وردپرسی به کار بگیرید.

به ترتیب زیر:

۱. فراخوانی فایل jQuery Lazy :

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

Or

<!-- jsDeliver -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

۲. اضافه کردن کلاس lazy به HTML :

در تگ img :

<img class="lazy" data-src="path/to/image.jpg" />

در تگ div :

<div class="lazy" data-src="path/to/image.jpg"></div>

۳. فعال سازی جاوا اسکریپت (درون تگ head یا body) :

$(function() {
  $('.lazy').Lazy();
});
                

به همین سادگی 🙂

دانلود فایل jQuery Lazy