اگر وقت کنم چیزایی که یاد گرفتم رو می نویسم
ویژگی onError در تگ img
لود نشدن عکس ها جز فجایعی هستش که توی سایت ها باهاش به رو به رو می شیم
اگر هندلش نکنیم وبسایتمون رو از ریخت می اندازه
ولی خب همچین بی راه حل نیست و می شه این مشکل رو به نوعی کنترل کرد
قطعا همچین تصویری رو توی همه سایت ها دیدین
به این تصاویر می گن placeholder در واقع این نوع تصاویر جای خالی تصویر اصلی رو پر کرده (ممکنه تصویر لود نشده باشه یا توی لود به ارور خورده باشه)
یه ویژگی عکس ها دارن به اسم این ویژگی کمک می کنه تا ما بفهمیم لود شدن عکس به هر دلیلی ارور خورده و می تونیم از نمایش تصویر شکسته در سایت جلوگیری کنیم
این تیکه کد ساده رو ببینید
<!DOCTYPE html>
<html>
<body>
<img src="image.gif" ='myFunction()'>
function myFunction() {
alert('The image could not be loaded.');
}
</body>
</html>
نتیجه این تیکه کد :
هر وقت لود عکس به ارور بخوره یه آلرت با متن "The image could not be loaded" به کاربر نمایش داده می شه
با همین منطق می تونیم src رو عوض کنیم یا عکس رو حذف کنیم یا هر بلایی سر صفحه بیاریم :)
اینم لینک رفرنس
امیدوارم مفید باشه
مطلبی دیگر از این انتشارات
شبه المنت ها و شبه کلاس ها در css
مطلبی دیگر از این انتشارات
روتینگ فارسی برای next js
مطلبی دیگر از این انتشارات
مفهوم Hoisting در جاوا اسکریپت