با استفاده از AntiModerate، تصاویر پیش‌رونده بهتری بسازید

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 15 تیر 1397
دسته بندی ها : طراحی وب

اسکریپت AntiModerate ممکن است چیز زیادی به نظر نیاید؛ اما یکی از بهترین اسکریپت‌های JS است، که می‌توانید آن را برای پیشرفت کارایی بر روی صفحه‌های بزرگ و حفظ تجربه کاربری خوب، اجرا کنید.

با استفاده از این پلاگین رایگان، می‌توانید عکس‌های خود را زمانی که بر روی صفحه ظاهر می‌شوند بارگذاری کنید و حجم کل صفحه خود را کمتر کنید.

به این صورت، صفحه می‌تواند در ابتدا با جانگهدارهای کوچکی برای عکس‌ها بارگذاری شود. سپس بازدید کنندگان شما می‌توانند به راحتی و بدون نیاز به انتظار برای بارگذاری همه موارد موجود در صفحه، آن را مرور کنند.

بهینه سازی تصاویر

نحوه کار آن به این صورت است:

پلاگین AntiModerate را به همراه اسکریپت StackBlur.js، به صفحه خود اضافه می‌کنید.

AntiModerate تمام ابعاد عکس را می‌کشد و تمام تگ‌های img را مجبور می‌کند به اندازه مشخصی در صفحه برسند. این عکس‌های از قبل بارگذاری شده از StackBlur.js رد شده‌اند، که در نتیجه حجم کلی نسخه پیش نمایش آن‌ها کمتر شده است، و باعث می‌شود صفحه با سرعت بالاتری بارگذاری شود.

وقتی که این عکس‌های کوچک‌تر در جای خود قرار دارند، AntiModerate عکس اصلی را در پس‌زمینه بارگذاری می‌کند. پس از این که دانلود عکس اصلی کامل شد،‌ هر عکس تار، ‌با نسخه اصلی جایگزین می‌شود. به همین راحتی!

انجام این کار، از هدر رفتن زمان زیادی برای بارگذاری عکس‌ها جلوگیری می‌کند و به صفحه شما کمک می‌کند تا بسیار سریع‌تر بارگذاری شود. از آنجایی که کاربران به این صورت می‌توانند محتویات را سریع‌تر دریافت کنند، این کار منفعت زیادی برای آنان دارد. همچنین، این کار به امتیاز SEPR شما کمک می‌کند؛ زیرا گوگل به سرعت صفحه اهمیت زیادی می‌دهد.

این کتابخانه را می‌توانید مستقیما از طریق npm یا Bower، و یا گرفتن اسکریپت آن از GitHub نصب کنید.

این کار فقط به چند خط کد جاوااسکریپت نیاز دارد و مطمئنا به پیشرفت صفحه شما کمک می‌کند.

همچنین باید اشاره کرد که این پلاگین بر پایه جاوااسکریپت خالص اجرا می‌شود، پس نیازی به هیچ‌گونه Dependency مانند jQuery برای کار کردن ندارد.

منبع

مقالات پیشنهادی

بهترین تصاویر را برای وبسایت‌تان انتخاب کنید

عکاسی بخش مهمی از وبسایت های بزرگ است. استفاده از تصاویر بزرگ و تمام عرض در وبسایت مهیج است و علاوه بر آن در نظر بگیرید که همیشه اولین چیزی که کاربر م...

با استفاده از Nuxt.js، یک وب‌اپلیکیشن پیش‌رونده بسازید

از زمان معرفی شدن وب‌اپلیکیشن‌ها توسط گوگل و از آنجایی که بسیاری از وب‌اپلیکیشن‌های سنتی در حال تبدیل شدن به وب‌اپلیکیشن‌های پیش‌رونده هستند، میزان پذ...

۱۰ تا از بهترین انیمیشن های متنی که می توانید با استفاده از CSS و JavaScript بسازید

شما می توانید با استفاده از سی اس اس و کمی جاوا اسکریپت انیمیشن های متنی زیبایی بسازید. این انیمیشن ها و جلوه ها را می توانید در هر حالتی مانند انیمیش...

۷ مورد از بهترین استراتژی‌ها برای استفاده از تصاویر در رابط وب

استفاده از یک تصویر به یاد ماندنی می تواند به تنهایی معرف برند شما باشد، ما انسان‌ها براساس خُلقیات‌مان بهتر می توانیم از هر حالت دیگری می‌توانیم الما...