تبلیغات
وبلاگ میلاد داودآبادی - تصاویری که آدرسشون صحیح نیست!
وبلاگ میلاد داودآبادی

تصاویری که آدرسشون صحیح نیست!

یکشنبه 10 بهمن 1389

نویسنده: میلاد داودآبادی | طبقه بندی:JavaScript، 

گاهی اوقات کنترل صحیح بودن آدرس تصاویر سایت چندان ساده نیست و شاید ما آدم محتاطی هستیم و با کمی محکم‌کاری احساس بهتری پیدا می‌کنیم.
توسط جاوااسکریپت و رویداد onError می‌تونیم برای تصاویری که آدرسشون صحیح نیست و لود نخواهند شد، یک آدرس جدید جایگزین کنیم تا شکل و شمایل صفحه سالم دیده شه و ما یکم حرفه‌ای به نظر بیایم.
توضیحات بیشتر در ادامه مطلب .

ابتدا این تصویر ماست:

  1. <img src="an-invalid-image.gif" alt="i like to be shown" /> 
    ما برای اهداف دوراندیشانه‌ای یک تابع جاوااسکریپت ایجاد می‌کنیم تا آدرس تصویر رو عوض کنه:
  1. function imageErrorHandler(img) {  
  2.     (img || this).src = 'images/a-valid-image.gif';  

  3. این تابع هم می‌تونه برای جاوااسکرییپت استفاده بشه و هم بصورت inline در تگهای img شبیه زیر:
  1. <img onerror="imageErrorHandler(this)" src="image.gif" alt="" /> 
و حالا با داشتن تابع imageErrorHandler کافیه این کد رو در انتهای کدهای صفحه بیاریم تا روی همه‌ی تگهای img اعمال شه:
  1. for(var i=0; i<document.images.length; i++) {  
  2.     document.images[i].onerror = imageErrorHandler;  

امیدوارم مفید باشه ...

← آخرین پستها

← نویسندگان

← ابر برچسبها