طراحی سایت شرکتی با کنترل پنل اختصاصی تحویل فوری - 350 هزار تومان اطلاعات بیشتر

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

پلاگین Lazy Loading جهت بالا بردن سرعت سایت

Lazy Loading,Lazy Loading plugin,بارگذاری صفحه,بارگذاری سایت,بارگذاری تصاویر سایت,افزایش سرعت سایت

کاهش عملیات سرور هنگام بارگذاری صفحه با پلاگین 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>

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

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود