5 ms·

I'm always happy when sites don't mess with <img> like this, since it completely breaks down for non-JS browsers. :/ There are ways to do this without breaking,

I'm always happy when sites don't mess with <img> like this, since it completely breaks down for non-JS browsers. :/ There are ways to do this without breaking, but it's not always done. Apparently.

ge96 10y ago
Oh man, that's one of those things with web that sucks you gotta factor it in. I don't know the percentage but say on average, 70% of a basic web gets most of the users. Then you have to factor in blind users, non-javascript, internet explorer... Ahhh It bothers me because I know it's something to address. So regarding non-javascript, most interfaces are built with JavaScript so what percentage are you addressing? I've only had the non-javascript come up personally regarding using Tor. I don't know/use Tor much. I don't ever put <noscript> alerts in ahhh I should though. I use AdBlock too, not sure if that affects what the desired end-result of non-javascript
- the8472 10y ago
  some sites also have silly JS breakage when you block 3rd-party domains while allowing same-origin requests. They blindly assume that stuff loaded successfully.
  - edraferi 10y ago
    > some sites also have silly JS breakage when you block 3rd-party domains while allowing same-origin requests. They blindly assume that stuff loaded successfully. Oh yeah, that's the worst. I use uBlock Origin to block third party JS by default, then selectively enable domains I trust (mostly CDN services). This is usually a happy medium between raw and noscript, but it definitely breaks a lot of pages.
    - patates 10y ago
      I have uMatrix installed just for that, didn't know uBlock origin could also block third party scripts. Oh well, I also love to block all cookies and only allow first party cookies on sites that I've an account with.
- nothrabannosir 10y ago
  I was talking about myself, in this case. Quite selfish, unlike your comment :) I use noscript and disabled JS on iOS Safari, for battery life and security. Not a fanatic noscript user at all, it just seems slightly less bad than full js at this point. Graceful degradation is a better choice than <noscript> tags, where possible. Which, for <img>, it is. thanks for considering the minority, even if it doesn't pan out :)
  - ge96 10y ago
    I don't know if it's a futile battle regarding accessibility. I guess if you're a big enough company/group you'd have experts in that area. Hmm yeah I guess I'm not as up to date with mobile(the stuff you mentioned)
nishs 10y ago
Medium.com does something similar (blur the image while waiting for it to load), but it appears they have a <noscript> fallback. <noscript class="js-progressiveMedia-inner"> <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*vY3BMZ9BrxgkD7je7f-Ckw.jpeg" </noscript>
vladdanilov 10y ago
Had to do it for the project website. The solution was to generate inline placeholder images and substitute original src attributes with them when DOM is loaded, then back on scroll and click events. The placeholder images are JS-generated solid color PNGs downscaled to just keep the same aspect ratio. SVGs could be much easier but less supported probably.

I'm always happy when sites don't mess with <img> like this, since it completely breaks down for non-JS browsers. :/ There are ways to do this without breaking, but it's not always done. Apparently.

ge96 10y ago

Oh man, that's one of those things with web that sucks you gotta factor it in. I don't know the percentage but say on average, 70% of a basic web gets most of the users. Then you have to factor in blind users, non-javascript, internet explorer... Ahhh It bothers me because I know it's something to address. So regarding non-javascript, most interfaces are built with JavaScript so what percentage are you addressing? I've only had the non-javascript come up personally regarding using Tor. I don't know/use Tor much. I don't ever put <noscript> alerts in ahhh I should though. I use AdBlock too, not sure if that affects what the desired end-result of non-javascript

the8472 10y ago
some sites also have silly JS breakage when you block 3rd-party domains while allowing same-origin requests. They blindly assume that stuff loaded successfully.
- edraferi 10y ago
  > some sites also have silly JS breakage when you block 3rd-party domains while allowing same-origin requests. They blindly assume that stuff loaded successfully. Oh yeah, that's the worst. I use uBlock Origin to block third party JS by default, then selectively enable domains I trust (mostly CDN services). This is usually a happy medium between raw and noscript, but it definitely breaks a lot of pages.
  - patates 10y ago
    I have uMatrix installed just for that, didn't know uBlock origin could also block third party scripts. Oh well, I also love to block all cookies and only allow first party cookies on sites that I've an account with.
nothrabannosir 10y ago
I was talking about myself, in this case. Quite selfish, unlike your comment :) I use noscript and disabled JS on iOS Safari, for battery life and security. Not a fanatic noscript user at all, it just seems slightly less bad than full js at this point. Graceful degradation is a better choice than <noscript> tags, where possible. Which, for <img>, it is. thanks for considering the minority, even if it doesn't pan out :)
- ge96 10y ago
  I don't know if it's a futile battle regarding accessibility. I guess if you're a big enough company/group you'd have experts in that area. Hmm yeah I guess I'm not as up to date with mobile(the stuff you mentioned)

nishs 10y ago

Medium.com does something similar (blur the image while waiting for it to load), but it appears they have a <noscript> fallback. <noscript class="js-progressiveMedia-inner"> <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*vY3BMZ9BrxgkD7je7f-Ckw.jpeg" </noscript>

vladdanilov 10y ago

Had to do it for the project website. The solution was to generate inline placeholder images and substitute original src attributes with them when DOM is loaded, then back on scroll and click events. The placeholder images are JS-generated solid color PNGs downscaled to just keep the same aspect ratio. SVGs could be much easier but less supported probably.