Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: www.amitmerchant.com
Hide an image entirely when it does not load in HTMLCategory: PHP, javascript
Well, this one blew my mind completely when I got to know about it. So, you probably are aware of the fact that the tag is used for displaying images on websites.
The thing is, you can set an onerror event handler on the image that will trigger an https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event If an error occurs while loading or rendering an image. So, you can use this to your advantage and hide the image completely if the browser is not able to render it like so.
So, when the image is not loaded, the browser will show the alt text.
The thing is, you can set an onerror event handler on the image that will trigger an https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event If an error occurs while loading or rendering an image. So, you can use this to your advantage and hide the image completely if the browser is not able to render it like so.
So, when the image is not loaded, the browser will show the alt text.
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers