• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 217 ۱۲ آذر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram