خیلی وقت ها پیش میاد عکسهای وب سایت ما به طور کامل بارگزاری نمیشن یا بر اثر خطای سیستمی یا انسانی یکی دوتا از عکسهای ما پاک میشن و ما معمولا یا اصلن متوجه نمیشیم یا زمان میبره تا متوجه بشیم. در این حالت کاربر وقتی به سایت شما مراجعه میکنه ممکنه با تصویر زیر روبرو بشه.
تو این مقاله میخواهم روشی رو بهتون یاد بدم که اگر این مشکل پیش اومد و عکسهاتون بارگزاری نشد، نه تنها ظاهر سایتتون مثل تصویر بالا آزار دهنده نباشه بلکه جذابتر هم بشه. در مانایید ما در طراحی های سایت برای مشتریان این نکته را لحاظ میکنیم برای مثال در زیر تصویری رو میبینید که بارگزاری نشده و به جای اون یک تصویر با ایده ای جالب به نمایش در میاد.
با این روش علاوه بر اینکه کاربر متوجه بروز مشکل در بارگزاری تصویر اصلی میشه دیگه یک فضای سفید و یک متن ساده توی ذوقش نمی زنه.
تا اینجا به اهمیت داشتن فضا نگه دار در سایت پی بردیم. اما چطور اون رو پیاده سازی کنیم.
در وردپرس اگر از پوسته های حرفه ای استفاده می‌کنید معمولا تنظیماتی برای این کار دارند. اگر هم پوسته شما چنین قابلیتی نداشت افزونه Dummy Images این کار رو برای شما میکنه.
اگر هم نمیخواهید از افزونه استفاده کنید یا کلا از ورد پرس استفاده نمیکنید کافیه تکه کد زیر رو توی هدر صفحات سایتتون قرار بدید.
let imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach((i)=>{
i.addEventListener('error', function() {
event.target.src = 'آدرس عکس دلخواه'
})
})این تکه کد تمام عکسهای موجود توی صفحه رو میگیره. اگر تصویری بارگزاری نشه رویداد (Event) error فراخوانی میشه. از همین رویداد استفاده میکنیم و میگیم هر تگ عکسی که این رویداد رو فراخوانی کرد به جای ویژگی (Attribute) src بیا و آدرس عکسی که ما تعیین میکنیم رو قرار بده و اون عکس رو نمایش بده. به همین سادگی.
امیدوارم این آموزش به کارتون بیاد و از اون استفاده کنید.
