روش گوگل در لود کردن تصاویر حجیم

اگه دقت کرده باشید وقتی که به google maps میرید و یه قسمت از نقشه رو میخواید ببینید متوجه میشید که نقشه به صورت تیکه تیکه های تصویر لود میشه و به شما نمایش داده میشه. خب این کار چه فایده ای داره؟ این کار برای مواقعی لازمه که حجم تصویر ما زیاد بوده و سرعت اینترنت کاربران ما نسبتا کم هست و کاربران باید مدت زیادی منتظر بمونن تا تصویر به نمایش در بیاد یا لود بشه. (برای دیدن پیش نمایش اینجا کلیک کنید)

خب ما میایم تصویر رو به تیکه های کوچکتر میشکنیم تا به جای اینکه یه تصویر حجیم داشته باشیم تعداد زیادی تصویر کم حجم داشته باشیم که این کار باعث افزایش سرعت لود شدن میشه.

خب حالا میخوایم این کار رو پیاده سازی کنیم , به دستورات زیر توجه کنید :

در مثال بالا تصویر خودمون رو که از نوع jpg هست در نظر می گیریم سپس توسط دو حلقه for که درون هم قرار دارند روی عکس حرکت میکنیم و تیکه های ۱۰۰ پیکسلی از عکس جدا میکنیم. یه حلقه روی سطر ها حرکت میکنه و تصویر رو به سطر های ۱۰۰ پیکسلی برش میده و حلقه ی درونی هر سطر از تصویر رو به تیکه های ۱۰۰ پیکسلی میشکنه.

اجرای این دو حلقه باعث میشه تا تصویر به قطعات ۱۰۰ پیکسل مربع تقسیم بشن و بعد از اون تصاویر رو در پوشه ی tiles ذخیره میکنیم و توسط دو دستور echo ادرس اون ها رو درون قسمت Src مربوط به تگ img قرار میدیم.

توسط این آموزش و آموزش مربوط به گرفتن تصاویر از گوگل به صورت استاتیک میتونید یه چیزی شبیه لودینگ گوگل مپ بسازید. من در اینجا براتون پیاده سازیش کردم که میتونید کلیک کنید و پیش نمایش رو ببینید همچنین این مثال به همراه مثال قبل رو میتونید از انتهای این پست دانلود کنید و استفاده کنید.

دقت کنید اگه میخواد تصاویر دقیقا مثل گوگل مپ با یه افکت Fade مانند بعد از لود شدن نمایش داده بشن باید استین مبارک را بالا زده و کمی از دستورات jquery یا جاوا اسکریپت استفاده کنید.

امیدوارم این اموزش مورد استقبال دوستان قرار گرفته باشه , همچنین اگه سایتی دارید که قراره تصاویر حجیم رو به نمایش در بیاره توسط این اموزش تصاویر رو به تیکه های کوچیک تقسیم کنید تا سریعتر لود بشه.

دوستان عزیز اگه سوالی دارند میتونن از انتهای پست سوال خودشون رو مطرح کنن تا پاسخ بدم.

لود تصاویر حجیم توسط برش دادن آنها
239.2 KiB
19 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. علیرضا

    واقعا اموزش جالبی بود
    اما دو تا مشکل ، تصویر خودش روش مناسبی واسه جذب یوزر هست ، الان این روش ظاهرا عکس رو تکه تکه میکنه درسته؟
    خب اگر تو گوگل فرضا تصویر یه محصولی باشه که ایندکس شده عکس محصول در اندازه طبیعی رو نمیاره و برای یوزر نهایی گنگ میشه اره؟
    من فکر کنم بیشتر به درد تصاویر خیلی بزرگ میخوره نه مثلا تصویر یه محصول
    یا اشتباه میکنم؟

    • این روش در گوگل مپ (google maps) استفاده میشه. این روش بیشتر برای نقشه ها استفاده میشه، اگه تیکه های عکس بزرگتر باشه عکس ها معنی خودشون رو از دست نمیدن 🙂 در کل برای تصاویر عادی خوب نیست

می‌خواهید دیدگاهتان را بیان کنید؟