سرعت لود عکس

شما سایز عکس رو که با اتربیوت های تگ 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 بیاد . و آیا اصلا همچین چیزی امکان پذیره

@shojai80
در این صورت باید از تکنیک Lazy Loading استفاده کنید
دقیقا کاری که در اپلیکیشن اینستاگرام انجام میشه
چند تا عکس لود میشه و اگر کاربر اسکرول کرد => با درخواست Ajax یه سری عکس دیگه هم لود میشه و ....

@shojai80

در خصوص سوالتون که چطور هر ۱۰ تا عکس مثلا با یک ریکوئست بیاد تنها یک راه وجود داره و اون هم استفاده از css sprites هست که با این روش میتونید هر تعداد دلخواه عکستون رو در یک عکس کنار هم قرار میدید و بعد با استفاده از css و تنظیمات background فقط محدوده مورد نظر از عکستون رو نمایش میدید. اینجوری با یک بار ریکوئست و یکبار دانلود عکس دسترسی به ۱۰ تا عکس بصورت یکجا و با هم خواهید داشت. از این روش بیشتر برای مواردی مثل آیکون ها و المان های تصویری کوچک که در قسمت های مختلف سایت بکار میره استفاده میکنند.

البته این کار برای مورد شما به نظرم تنها در صورتی توجیه داره و شدنی هست که تصاویرتون ثابت باشند و بصورت داینامیک قرار نباشه تغییر کنند.