3

I'm starting to wonder if it is possible after reading some of the other posts

Lazy loading images how

Lazy loading images

If I include all the images on the page with src attributes set am I right in thinking that it is not possible to stop the images loading cross browser?

If I just include data-src attributes users without JS won't see the images.

I was thinking of some sort <noscript> solution but wouldn't this make the page semanticly bad?

Nick F
  • 9,781
  • 7
  • 75
  • 90
Tom
  • 12,591
  • 13
  • 72
  • 112

2 Answers2

3

Use normal img tags with src attributes in your markup, then use JavaScript to null out the src attributes of images that you want to be lazy loaded and handle the lazy loading appropriately. Users with JavaScript disabled will load all of the images normally, and users with JavaScript enabled will receive a more responsive browsing experience.

Chris Shouts
  • 5,377
  • 2
  • 29
  • 40
  • does this work? I was under the impression that certain browsers would still load the images? – Tom Jul 15 '11 at 15:32
  • Well, if the images are cached locally or just happen to load quickly (before your script runs) they will be loaded normally, but is that a problem? If you're worried about browsers loading images with an empty `src` attribute, I don't think that will happen. – Chris Shouts Jul 15 '11 at 16:29
  • I had just noticed that http://www.appelsiini.net/projects/lazyload has notice saying it doesn't work with latest browsers (haven't looked into why this is) and thought the images might already start loading and continue to load before js kicks in (thought I'd seen this mentioned somewhere). I will do some tests though and report back. Thanks for your reply – Tom Jul 15 '11 at 16:57
  • 1
    Apparently images continuing to load after having their `src` attribute modified by JavaScript is a known, [outstanding bug in WebKit](https://bugs.webkit.org/show_bug.cgi?id=6656). This would potentially make the suggested technique ineffective for WebKit-based browsers (most notably Chrome and Safari). It would be super if someone could validate whether or not this is an outstanding issue with the aforementioned browsers. – Chris Shouts Jul 15 '11 at 17:13
0

Actually, it is possible. Simply use the decoding attribute set to async like so. 

<img src="/path/to/file.jpg" decoding="async"></img>

Please note that not all browsers support this (*cough* Internet Explorer *cough*), but support is growing in mainstream good browsers.

Also, I am assuming that the most likely reason for why you want to lazyload images is to make your website load faster. If this is the case, then you can make your website load a huge amount even faster simply by converting your images to jpegs and compressing them with compressor.io/JPEGmini (upload your jpeg file to both and use whichever turns out smaller after compression).

Jack G
  • 4,553
  • 2
  • 41
  • 50