CSS-Image-Loader
Add a image loader & image load error (without adding an HTML element or using JS). Just pure CSS!
Note: this is just a proof of concept. You should still provide a fallback source for your images using an
onerror
etc. As iOS / Webkit devices do NOT currently support the CSS attribute::before
needed for the fallback error image.
Example
Want to help improve this project? Create a pull request with your detailed changes! If approved you will be added to the list of contributors of this awesome project!
See also the list of contributors who participate in this project.
This repo is licensed under the MIT License - see the LICENSE.md file for details.
Improve responsive behavior
Here you have a demo with a closer structure as you used for your code: https://codepen.io/ipuntoj/pen/xxWJEvK
In this case you don't need to know the height and the width of the image (in CSS), but is always recommended to put the size in your
<img>
tag.From https://www.w3schools.com/tags/tag_picture.asp
Do you think it's necessary to specify in this project?
Improvement - HTML formating
HTML tags head and body Basic HTML declarations and metatags Added tag and CSS wrapper Improved overall CSS and responsive behaviour
Preview: https://codepen.io/vasfvitor/pen/mdxGwex
fixed sizes, removed overflow and commented better