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.

@idotj - thank you very much for this.

My CSS is absolute trash. I will admit! Tho I would very much appreciate a PR for this if you are willing. I can commit these files but I would rather you sign your name on the project as well!

Few things I will ask before a PR is made (if you are willing) -

Address hiding the ALT tag name as before
Hide the loading animation / full size the background image in the ::after



you can see the animation still if you look closely here



If possible - ensure this is working for iOS (currently your demo & mine do not work)

@idotj closing this and updating current version to reflect this code! As well with some modified changes. To hopefully fix the problems I addressed above (besides fix for iOS)

@idotj ps - feel free to make a commit even with a comment on this project. I will accept it as your fix was more than appreciated. PS - maybe you can help look at the current PR and see if there is any fixes etc.

I thought I had the img attribute size figured out but no I do not!

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.

I added this - but it seems the sizes do not work on correctly in the demo page. Wondering if I should re-vert back to previous version or if you have any suggestions?

Edited: changed the CSS - feel free to take a jab at providing a solution.

@idotj I have been playing with this with still no luck. I was able to apply / hide the image based on class. But when I use more than one - there seems to be an issue

The CSS to reproduce my playing:

img {

  /* background-color shows in the reserved space before image loads */
  background-color: hsl(220, 20%, 90%);
  /* Make background pulse so it looks kinda load-y */
  animation: loading 0.8s infinite alternate;
}

@keyframes loading {
  to {
    background-color: hsl(220, 10%, 75%);
  }
}

/*
Pseudoelements only show if the image fails to load
This means we can use them to show a nice overlay with the alt text inside
*/
img::after {
     content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: hsl(220, 20%, 90%);
  /* Error Image (can used a normal url or SVG if prefered) */ 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='545.79' height='545.79' viewBox='0 0 144.407 144.407'%3E%3Cg transform='matrix(6.56831 0 0 6.56831 -603.38518 -966.29009)'%3E%3Cpath d='M98.902 149.99l2.093 2.093h8.487c.823 0 1.292.206 1.584.498s.496.759.496 1.582v8.486l1.834 1.834c.175-.512.259-1.076.259-1.666v-8.654c0-1.203-.346-2.298-1.111-3.063s-1.86-1.111-3.063-1.111zm-2.784.043c-.919.114-1.741.457-2.352 1.068-.765.765-1.109 1.86-1.109 3.063v8.654c0 1.203.345 2.297 1.109 3.062s1.862 1.109 3.064 1.109h12.652c1.049 0 2.017-.263 2.754-.838l-1.505-1.505c-.288.155-.686.251-1.249.251H96.83c-.823 0-1.292-.206-1.584-.498s-.498-.759-.498-1.582v-8.654c0-.823.205-1.29.498-1.582s.761-.498 1.584-.498h1.337z'/%3E%3Ccircle cx='108.403' cy='155.353' r='1.25'/%3E%3Cpath d='M93.277 147.113l-1.414 1.414 10.671 10.591-1.659 2.261-.237-.276-1.536-1.79-1.536 1.79-1.536 1.79h3.073.474 2.599 1.665 2.39l6.205 6.206 1.414-1.414-20.57-20.572z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width:  100px;
  height: 100px;

}
.test{
   float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
.test::after{
   float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

HTML: <img src="http://placekitten.com/420/420" class="test" alt="Image alt text">

If you use more than two tho - issue occurs. Would like someone with more CSS experience than me (as you can tell I am brutal). To hopefully properly implement this as well document the proper usage of it.

Hi there, I've just check a little bit the pseudo-elements documentation and I think that Safari doesn't support the ::after in images because is a replaced-element. https://developer.mozilla.org/en-US/docs/Web/CSS/::after

In the past even Chrome or Firefox didn't show any pseudo-element in img, video or iframe tags because of its nature. So not sure if this will work cross-browser...

@idotj - you are 100% right. I am wondering if there is a workaround for this or if nothing at all. And if not - this still provides a cool pure CSS image loader vs using JS which could improve site performance.

ps; hope you know I did add some of your code in. If you'd like credited etc as said, make a change in the repo etc. And I will accept it without hesitation to put your name on this. (as the loaders provided are way better).

Speaking of which - I was hoping to ask where you'd grabbed it. Hoping we can possibly add a media prefers' dark theme version with different colors of it! (if you have this) feel free to even commit that if willing!

MarketingPipeline / CSS-Image-Loader

Improve responsive behavior #2