24
تشکر

تصاویر ریسپانسیو – تکنیک دوم

طراحی ریسپانسیو

طراحی ریسپانسیو

چندی قبل مطلبی به نام “ایجاد تصاویر ریسپانسیو با Jquery و PHP” قرار دادیم که در آن میتوانستیم بسته به اندازه صفحه نمایش کاربر عکس مورد نظر را فراخوانی کنیم. برای مثال برای صفحه نمایش های بزرگتر عکس بزرگ را فراخوانی میکنیم و برای صفحه نمایش های کوچک عکس کوچک را فراخوانی میکنیم. دلیل های اینکار را هم در همان مطلب گفتیم که برای اطلاعات بیشتر میتوانید به آن مطلب مراجعه کنید.

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

این تکنیک, یک تکنیک کاملا کلاینتی و Javascript Base است. یعنی نیازی به زبان های سمت سرور وجود ندارد.

برای مثال من میخواهم یک تصویر ریسپانسیو درون سایت قرار بدهم. خوب برای اینکار کد زیر را مینویسیم.

<noscript data-large='Koala.jpg' data-small='Koala-small.jpg' data-alt='Koala'>
    <img src='Koala.jpg' alt='Koala' />
</noscript>

همانطور که میبینید که عکس مورد نظر را درون یک تگ noscript قرار داده ام. اینکار باعث میشود تصویر داخل این تگ لود نشود.

همچنین میبینید که به تگ noscript سه خصوصیت اضافه کردیم. یک خصوصیت data-large که آدرس عکس بزرگ است. دیگری data-small که آدرس عکس کوچک است و آخری هم data-alt که alt تصویر است.

سپس با استفاده از کد جی کوئری زیر اندازه صفحه نمایش کاربر را میگیریم. اگر عرض صفحه نمایش کوچکتر از 500 باشد عکس کوچک لود میشود در غیر اینصورت عکس بزرگ لود خواهد شد.

$('noscript[data-large][data-small]').each(function(){
  var src = screen.width >= 500 ? $(this).data('large') : $(this).data('small');
  $('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($(this));
});

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

  • علیرضا می‌گه:

    این روش باعث افزایش تعداد درخواست های http نمیشه ؟

  • امیر می‌گه:

    من متوجه نشدم …. من باید یه فایل Js درست کنم و کد مربوط به جاوا درونش قرار بدم و بعد لینک js در head صفحه معرفی کنم ؟

    این کارو کردم اما جواب نداد ….

    • محسن شفیعی می‌گه:

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


  • نظرات این مطلب بسته است.