وبگرانبرنامه نویسیبارگذاری تصاویر سایت به سبک Lazy Loading

 بارگذاری تصاویر سایت به سبک Lazy Loading


بارگذاری تصاویر سایت به سبک Lazy Loading

بارگذاری تصاویر سایت به سبک Lazy Loading

بیشتر از ۶۰ درصد محتوای سایت های امروزی را تصاویر تشکیل می دهند و زمانی که صفحات دارای تصاویر باشند سرعت لود صفحات بالا رفته و در نتیجه کاربر باید زمان طولانی تری را منتظر لود شدن صفحات بماند. اینجاست که نیاز به Lazy Loading بیشتر مشخص می شود. این تکنیک درحقیقت یک راهکار بارگذاری تصاویر است که تنها زمانی که نیاز باشد و صفحه توسط کاربر اسکرول شود اقدام به نشان دادن تصاویر خواهد کرد.

در بسیاری از افزونه های Lazy Loading سیستم مدیریت محتوای وردپرس ویزگی src پشتیبانی نمی شود و در حقیقت نیاز به ویژگی data-src دارد که این با سینتکس استاندارد HTML5 مقایرت دارد. درنتیجه تصمیم گرفتیم این ویژگی مهم و پر اهمیت را هم با کد نوسی و هم با افزونه به شما کاربران گرامی توضیح دهیم.

شیوه استفاده از Lazy Loading

۱- ابتدا فایلی که در پیوست زیر قرار دارد را دانلود کنید.
۲- کتابخانه های جی کوئری و imglazyload را در ابتدای صفحه فراخوانی کنید.

۳- تصاویر مورد نظرتان را با ویژگی های src و data-src به صفحه خود اضافه کنید. loading.svg=انیمیشن بارگذاری صفحه

۴- تابه imglazyload را به سلکتور عکس هایتان مربوط کنید.

۶- این هم آپشن های اضافی که در صورت نیاز به صفحه خود اضافه کنید

وبگران –  طراحی سایتطراحی وب سایت

لایکش کن Like
اشتراک گذاری

۱۳۹۶ © کلیه حقوق سایت برای وبگران محفوظ است

بالا