Add a image loader & image load error (without adding an HTML element or using JS).

  • By Marketing Pipeline
  • Last update: Dec 6, 2022
  • Comments: 4

CSS-Image-Loader

Pure CSS Image Loader

Add a image loader & image load error (without adding an HTML element or using JS). Just pure CSS!

Show your support!

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

Contributing GitHub

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.

License License: MIT

This repo is licensed under the MIT License - see the LICENSE.md file for details.

Github

https://github.com/MarketingPipeline/CSS-Image-Loader

Comments(4)

  • 1

    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.

  • 2

    support?

    From https://www.w3schools.com/tags/tag_picture.asp

    <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

    Do you think it's necessary to specify in this project?

  • 3

    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

  • 4

    fixed sizes, removed overflow and commented better

    • I fixed the image sizes together with the error image with the object-fit property
    • Removed the horizontal overflow which was caused due to having larger image
    • Added more reset rules
    • Left content url as it is for the case of base64 image
    • Gave the layout better fonts.

Popular Tag

Related