ترفندهای پیشرفته jQuery (قسمت 51)

- visibility ٠ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 89 : سروکله زدن با Retina

برای اینکه وبسایت خودتون رو بر روی دستگاههای High DPI Screen بهینه کنید و کاری کنید که بخوبی نمایش داده بشه ، شما به تصاویر و المنتهای باکیفیتتری نیازمندید.

یکی از روشهایی که وجود داره اینه که بر روی دستگاه هایی که Retina هستند ، عکسهای با کیفیت بالاتری را لود کنیم که این مشکل رو برای ما حل میکنه. برای این کار میتونیم از پلاگین jQuery-Retina استفاده کنیم.

در ابتدا این ابزار رو include میکنیم:

کد HTML:

میبینید که با استفاده از تگ img یک تصویر قرار دادیم و در ویژگی src اون تصویر با کیفیت پایین رو قرار دادیم که بر روی صفحه های غیر Retina نمایش داده میشه و عکس با کیفیت بالا و سنگین تر رو در ویژگی data-retina قرار دادیم که این عکس در صفحاتی که Retina هستند لود و نمایش داده میشه. عکسی که در Data-retina قرار میگیره بطور معمول دو برابر عکس عادی هست. چه از نظر width و چه از نظر height.

حالا میتونین بسادگی با استفاده از Javascript این پلاگین رو اعمال کنید و این جایگزینی در مواقع لازم انجام بشه:

با اینکار پلاگین عکس مورد نظر رو مورد جستجو قرار میده و آدرسی که در data-retina هست رو بررسی میکنه و اونو جایگزین میکنه.

تا اینجا این ابزار بخوبی برای شما کار مورد نظر رو انجام میده ولی شما میتونین کمی بیشتر روی اعمالی که انجام میشه نظارت داشته باشید.

مثلا فرض کنید میخاید اول در سرور چک بشه که عکسی که در data-retina وجود داره، موجود هست یا خیر و در صورت موجود بودن اونو لود کنه و جایگزین کنه. برای اینکار میتونیم بصورت زیر عمل کنیم:

با این کار اگر عکس موجود نباشه ، هیچ جایگزینی انجام نمیشه.

شما بجای اینکه مستقیما آدرس تصویر مخصوص صفحات Retina رو در data-retina قرار بدین، میتونین اونا رو با استفاده از js آدرس دهی کنید. برای اینکار یک عکس با پسوند -2x میسازیم و اونو در کنار تصویر معمولی قرار میدیم. این 2x که قرار داده شده به معنای اونه که این تصویر دو برابر حالت معمول هست. حالا کد HTML رو بصورت زیر وارد میکنیم:

میبینید که data-retina وجود نداره. حالا با استفاده از js اینکارو انجام میدیم:

با اینکار پلاگین دنبال rmnp-2x.jpg میگرده و اونو جایگزین میکنه.

همچنین میتونین با استفاده از یک تابع و Callback آدرس عکس retina رو دریافت و جایگزین کنید. برای اینکار بصورت زیر عمل میکنیم:

حالا یک تابع میسازیم که یک آدرس رو return میکنه:

حالا درون callback متد retina به این تابع آدرس داده میشه:

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

دیدید که تونستیم به راحتی سایتمون رو برای صفحات retina بهینه سازی کنیم و کاری کنیم که از کیفیت ظاهری اون کم نشه.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران
حمید رضا مصطفی زاده

سلام و دست مریزاد مهندس بابت این نکات jquey
منتظر pdf مطالب هستیم.
آقای اسفندیاری بیشتر مطالبت شما UI بود
شما که دارید زحمت میکشید به نظرتون وقتش نیست که برید سمت server؟
واقعا جای مطالب mvc تو سایت شما خالی هست….
تشکر

سلام خواهش میکنم
PDF هم به زودی قرار داده میشه
در مورد MVC هم شاید مطالبی قرار داده بشه.
فعلا یکم سرم شلوغه و بنظرم اگه اول UI قوی باشید بعد برید سمت سرور خیلی بهتره
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.