کاهش عملیات سرور هنگام بارگذاری صفحه با پلاگین Lazy Loading

کاهش عملیات سرور هنگام بارگذاری صفحه با پلاگین Lazy Loading

Lazy loading کلمه ای است که احتمالا به گوش شما رسیده باشد بارها پیش آمده که صفحاتی در سایت وجود داشته که تصاویر زیادی را در خود جا داده و باعث کندی سرعت سایت می شوند مانند صفحاتی که اخبار گوناگون در آن وجود دارد برای رفع این مشکل می توان از پلاگین lazy loading استفاده کرد. این پلاگین باعث می شود که تصاویر در همان لحظات اولیه بارگذاری صفحه لود نشوند بلکه این اتفاق هنگام اسکرول صفحه توسط کاربر رخ دهد. به گونه ای که تا زمانی که کاربر تصمیم به تماشای تصویر نکرده، تصاویر لود نشوند و  فشار کمتری به سرور وارد شود.

لینک دمو
 

ابتدا کتابخانه جی کوئری و فایل jquery.lazy.min.js را پس از دانلود از لینک فوق به پروژه ضمیمه نمایید.

کد HTML پلاگین Lazy Loading

    <img class="lazy" data-src="image/1.jpg" />
    <img class="lazy" data-src="image/2.jpg" />
    <img class="lazy" data-src="image/4.jpg" />
    <img class="lazy" data-src="image/0.jpg" />
    <img class="lazy" data-src="image/3.jpg" />
    <img class="lazy" data-src="image/5.jpg" />
    <img class="lazy" data-src="image/6.jpg" />
    <img class="lazy" data-src="image/7.jpg" />
    <img class="lazy" data-src="image/8.jpg" />
    <img class="lazy" data-src="image/9.jpg" /> 

کد CSS پلاگین Lazy Loading

<style>
    img.lazy {
        width: 700px; 
        height: 467px; 
        display: block;
        margin: 30px 0 auto;
    }
</style>

 

کد JAVASCRIPT پلاگین Lazy Loading

   <script>
        $(function() {
        $('.lazy').lazy();
    });           
    </script>

منبع:طراحی سایت ارزان