استایل دهی تصاویری که لود نمی شوند

زیباسازی تصاویری که لود نمی شوند

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

 

دو حقیقت در مورد عنصر <img>

  1. اولین نکته که در مطلب قبلی گفته شد این است که می توانیم برای <img> استایل های مربوط به متن را نیز اختصاص دهیم.
  2. عنصر تصویر در صفحات وب از نوع عناصر “جایگزین شده” می باشد. به این معنا که اندازه عنصر و ظاهر آن توسط یک منبع خارجی تعیین می شود. عناصر دیگری مثل عناصر مربوط به فرم ها هم از این قبیل هستند. این نوع عناصر دارای شبه عناصری مثل after:: و before:: نمی باشند. اما نکته جالب اینکه زمانی که تصویر با مشکل مواجه می شود و در صفحه بارگذاری نمی شود این شبه عناصر (pseudo-elements) برای <img> ظاهر می شوند.

 

نحوه انجام کار و چند مثال

به عنوان نمونه HTML زیر را در نظر بگیرید:

 


<img src="http://mojtabaseyedi.com/images/avatar.png" alt="همیشه خوبه آدم لبخند بزنه :p"> 

 

فراهم کردن اطلاعات مفید

علاوه بر یک متن اختیاری و مناسب در مورد تصویر می توانیم با استفاده از ()attr محتوای src تگ تصویر را به کاربر در زمانی که تصویر با مشکل مواجه می شود, نمایش دهیم:

 
زیباسازی تصویری که لود نمی شود

 


img {  
  font-family: 'tahoma';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
}

img:before {  
  content: "): شرمنده دیگه, نشد عکس رو ببینید";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

 

جایگزینی بهتر برای متن جایگزین

منظور از متن جایگزین همان محتوای ویژگی alt عنصر تصویر می باشد که می توانیم با استفاده از این ترفند ظاهری بهتر برای محتوای آن بوجود آوریم:

 
استایل دهی به تصویری که لود نمی شود
 


img {  
  font-family: 'tahoma';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome, tahoma;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

 

 

طرحی دیگر

 
استایل دهی به متن جایگزین تصویر

 


img {  
  font-family: 'tahoma';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " این تصویر می گه: " attr(alt) " می بینید؟ پس چیز خیلی خاصی هم نبود :)";
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome, tahoma;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

 

 

حرف آخر و پشتیبانی مرورگرها

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

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

 

Browser Alt Text :before :after
Chrome (Desktop and Android)
Firefox (Desktop and Android)
Opera (Desktop)
Opera Mini ✓ **
Safari (Desktop and iOS) ✓ *
iOS Webview (Chrome, Firefox, others) ✓ *

 

* متن alt فقط زمانی نمایش داده می شود که تصویر دارای یک عرض مناسب برای آن باشد. اگر width را برای عنصر تصویر تعیین نکنیم شاید اصلا متن alt نمایش داده نشود.

** استایل های مربوط به متن و فونت اعمال نمی شود.

بررسی دقیق تر پشتیبانی شبه عناصر و ()attr در مرورگرها:

 

منبع

 
در نهایت دموی زیر کاملا این موضوع را نمایان می کند که تا چه حد در انجام این کار آزادی عمل داریم:

 

See the Pen Styling broken images by Mojtaba Seyedi (@seyedi) on CodePen.


 

5 دیدگاه برای “زیباسازی تصاویری که لود نمی شوند

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *