Fallback without Javascript
pixmin opened this issue · comments
The big problem with this is that the images won't show if there is no javascript. It would be better to leave the original img src and change it with javascript to the loading image...
The image will download anyway. If you want fallbacks use a <noscript> tag underneath each image, inside a CMS/script this would be easy to setup as a repeat of the original image source.
Hum, I don't believe this is true, at least in my test, using Firefox and disabling javascript on this page:
http://toddmotto.com/labs/echo/
I do not see the photos but only the rotating loader...
My reply was to your leave the original img src and change it with javascript comment. Including an original src and changing it will download images - as soon as the img tag is rendered in the DOM the download will begin. Images are downloaded asynchronously and there is no way of stopping them.
Ho, I see, thanks for the reply. But wouldn't it be better to leave the HTML untouched, then using JS replace the src tag for all images to the "turning loader", and load the photos as you scroll down? This way the HTML doesn't need to be modified, plus the photos will still appear if the javascript doesn't load or is disabled...
If you leave the HTML untouched, that defeats the whole concept/benefit of lazy-loading? :)
If I load the page as:
<img src="photo.jpg">
...then change all images to:
<img src="blank.gif">
All images previously specified will download, and there is really no point in any further manipulation. Changing them back to the original src is pointless as they'd already be downloaded.
If you're worried about JS, then don't use lazy-loading or provide <noscript> fallbacks.
Ho I see, sorry! I assumed it would be possible to replace the original src tag before the browser would load all the images.
So if I add a noscript tag with the original image, it will only be loaded IF there is no javascript? (so it won't, again, defeat the purpose of lazy-loading...)
You can only replace the src attribute value when the DOM tree has fully rendered (known as DOM ready where modern browsers fire the DOMContentLoaded event). At this point, img nodes are available to access via JavaScript, but at this stage the images will have started to download, and there is no way of preventing the full download of each image. <noscript> would definitely be the way to go, I'd advise <html class="no-js"> be your starting point on your page, that way you can hide any images that may be identified as lazy-loading:
HTML:
<img src="blank.gif" data-echo="photo.jpg">
CSS
.no-js [data-echo] {
display: none;
}
That way any placeholder images will be completely hidden and <noscript> will take effect.
Thanks a lot for this, I really appreciate your time and input on this, and thanks for bearing with me!
You're welcome. Feel free to tweet for anything in future.