17
تشکر

ایجاد تصاویر ریسپانسیو با Jquery و PHP

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

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

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

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

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

در ادامه با ما همراه باشید…

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

مشکل دوم این است که هیچ وقت کاربر موبایل برای یک صفحه وب مثلا 1.5MB از پهنای باند خودش را دور نمیریزد. البته بستگی به سایت مورد نظر هم دارد.

و مشکل سوم این است که وقتی شما یک تصویر را از سایز واقعی خودش خیلی کوچکتر نمایش میدهید کیفیت آن پایین می آید.


خب راه حل چیست؟

دو نوع راه حل وجود دارد. راه حل اول استفاده از زبان سمت سرور با کمک htaccess. و راه حل دوم استفاده از jquery

البته در هر دوی این راه حل ها هر دو زبان دخالت دارند ولی دسته بندی به این صورت است.

در این مطلب ما راه حل دوم را توضیح میدهیم.

شما ابتدا باید وقتی صفحه لود شد اندازه نمایشگر کاربر را برای یک زبان سمت سرور با استفاده از ajax بفرستید. به این صورت:

function resize_images() {
	$('img.resize').each(function(){
		var _image = $(this);
		$.ajax({
			type: "POST",
			url: "resize.php",
			data: "width="+$(window).width()+"&image="+_image.attr('rel'),
			success: function(msg) {
				_image.attr('src',msg);
				_image.removeClass('loading_image');
			}
		});
	});
 }

خب کار تقریبا تمام شده است(البته اگر با ajax jquery آشنایی داشته باشید). تنها کار باقی مانده این است که در صفحه resize.php شما عکس مورد نظر رو بر اساس اندازه صفحه نمایشگر کاربر نشان بدید و به عنوان خروجی بفرستید.

در مطالب بعدی قسمت سمت سرور را هم میگذارم.

اگر سوالی در مورد کد بالا دارید با استفاده از شماره آن, توضیح بخواهید.

  • پیمان می‌گه:

    سلام
    عرض مناسب میفرستی یا عکس با عرض مناسب؟
    سوال دوم اینکه وقتی صفحه لود شد کدت اجرا میشه, بنابراین اون 1.5 mg لود میشه.اینطور نیست؟

  • امیر می‌گه:

    ممنون میشم اگه کد C#.net بزارین ….

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

      الان در کد بالا ما عرض نمایشگر کاربر رو به سمت سرور میفرستیم. تنها کاری که باید در سمت سرور بکنید اینه که بر اساس عرض دریافتی، عرض عکس مناسب اون نمایشگر رو بفرستید.

  • Ali می‌گه:

    خیلی دنبال این مطبل بودم ممنون!


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