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
Glimpse
Glimpse streamlines Laravel development by seamlessly deploying GitHub pull requests to preview environments with the help of Laravel Forge.
Community Partners
Laravel/PHP Careers