افزودن Plceholder به عکس ها

اگه مواردی مثل shimmer loading رو در نظر نگیریم نکته ی مهمی که باید بهش توجه کنیم اینه که به هیچ عنوان نباید تگ img رو تبدیل به div کنیم. چون این کار به SEO سایت مون ضرر زیادی میزنه (البته اگه سئو مهم باشه).

برای ایجاد یک placeholder برای تگ img اول بهتره یک رنگ background برای اون در نظر بگیریم چون ممکنه حتی اون عکس placehoder ای هم که داریم لود نشه.🙂

بعد از اون میایم از ایونت onerror روی تگ img استفاده میکنیم، وقتی لود عکس به مشکل میخوره این ایونت کال میشه و میتونیم عکس img رو تغییر بدیم:

<img style="background-color: yellow" src="test.jpg" alt="" onerror="this.src='placeholder.webp'" width="100" height="100"/>

نکته ی آخر هم این که اگه تگ picture و source استفاده میکنید این ایونت onerror کار نمیکنه و احتمالا باید با جاوا اسکریپت این مشکل رو برطرف کنید و این که یادتون نره حتما width و height عکس ها رو تعیین کنید که دچار ارور cls نشید.