سرعت لود عکس
سلام به دوستان.
من یک لیست حدودا 100 تایی دارم که کاربرام برای به روز رسانی قیمتهای محصولاتشان در سایت از آن بهره می برند. هر کدام از این 100 محصول یک عکس هم دارد که البته با سایز و حجم کوچک نمایششان میدهم. اما به شددت سرعت لود را پایین میارن. مثلا بدون عکس 3 ثاییه و با عکس 23 ثانیه لود صفحم طول میکشه.
میشه یکی از دوستان راه حلی رو پیشنهاد بده
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
شما سایز عکس رو که با اتربیوت های تگ img عوض میکنید یا با CSS ، اون عکس ابتدا کامل لود میشه. به همین خاطر
باید عکس ها رو به یک سایز کوچیک تر (Thumbnail) تبدیل کنی و از عکس های کوچیک توی تگ img استفاده کنی.. نهایتا هر کدوم ۱۰-۲۰ kb
برای این کار میتونی از کتابخونه زیر در لاراول استفاده کنی:
http://image.intervention.io/
اولا همون طوری که اشاره شد بایستی تصاویر با اندازه کوچیک (thumbnail) رو بجای تصاویر اصلی نمایش بدید.
ولی باز هم این قضیه یک مشکل داره و اون هم اینکه تعداد ریکوئست های بالایی ایجاد میکنه و اینکه فقط ۱۰۰ ریکوئست برای گرفتن این تصاویر بصورت تک به تک حتی با حجم پایین داشته باشید باز هم زیاد جالب نیست و روی بهره وری و سرعت تاثیر گذار هست.
بصورت کلی هیچ وقت نیاز نداریم که کل تصاویر رو در ابتدای کار لود کنیم. چون معمولا در نگاه اول اصلا جا نمیشه این تعداد.
معمولا یک روش رایج استفاده از pagination هست. یعنی بیاید داده هاتون رو صفحه بندی کنید. ولی اگر به هر دلیلی تمایل داشتید که همشون دریک صفحه باشند، با توجه به اینکه به احتمال زیاد این عکس ها در نگاه اول نیستند و اسکرول میخورند و به پایین صفحه میرند میان این کارو با جاوا اسکریپت مدیریت می کنند به این شکل که تصاویر یا اصلا کل محتوا، زمانی لود میشه که کاربر اسکرول کرده و به محتوای مورد نظر رسیده. این کار باعث میشه اول کار که صفحه میخواد لود بشه فقط به همون تعداد مورد نیاز محتوا و تصویر لود میکنه.
آموزش ها و کتابخونه های زیادی هم در این خصوص وجود داره که اگر با کلیدواژه هایی مثل image load on scroll یا image lazy load سرچ کنید بهش میرسید. چند تا لینک زیر رو هم بررسی کنید دقیقا مرتبط با همین موضوع هست:
https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
http://jquery.eisbehr.de/lazy/
@ali.bayat
سلام. تشکر بابت جواب. من یک سایز کوچیک ار عکسها موقع ذخیره سازی میسازم و در لیستهام از اونها استفاده میکنم
@mhyeganeh
تشکر بابت جوابتون.. بله مشکل اصلی تعداد request های بالاست. راه هایی که فرمودید مناسب و متداوله منتها من بیشتر می خوام بدونم آیا میشه تعداد request را کم کرد مثلا هر 10 تا عکس با یک request بیاد . و آیا اصلا همچین چیزی امکان پذیره
در خصوص سوالتون که چطور هر ۱۰ تا عکس مثلا با یک ریکوئست بیاد تنها یک راه وجود داره و اون هم استفاده از css sprites هست که با این روش میتونید هر تعداد دلخواه عکستون رو در یک عکس کنار هم قرار میدید و بعد با استفاده از css و تنظیمات background فقط محدوده مورد نظر از عکستون رو نمایش میدید. اینجوری با یک بار ریکوئست و یکبار دانلود عکس دسترسی به ۱۰ تا عکس بصورت یکجا و با هم خواهید داشت. از این روش بیشتر برای مواردی مثل آیکون ها و المان های تصویری کوچک که در قسمت های مختلف سایت بکار میره استفاده میکنند.
البته این کار برای مورد شما به نظرم تنها در صورتی توجیه داره و شدنی هست که تصاویرتون ثابت باشند و بصورت داینامیک قرار نباشه تغییر کنند.