Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fallback without Javascript #2

Closed
pixmin opened this issue Nov 22, 2013 · 9 comments
Closed

Fallback without Javascript #2

pixmin opened this issue Nov 22, 2013 · 9 comments

Comments

@pixmin
Copy link

pixmin commented Nov 22, 2013

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...
@toddmotto
Copy link
Owner

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.

@pixmin
Copy link
Author

pixmin commented Nov 22, 2013

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...

@toddmotto
Copy link
Owner

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.

@pixmin
Copy link
Author

pixmin commented Nov 22, 2013

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...

@toddmotto
Copy link
Owner

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.

@pixmin
Copy link
Author

pixmin commented Nov 22, 2013

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...)

@toddmotto
Copy link
Owner

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.

@pixmin
Copy link
Author

pixmin commented Nov 22, 2013

Thanks a lot for this, I really appreciate your time and input on this, and thanks for bearing with me!

@toddmotto
Copy link
Owner

You're welcome. Feel free to tweet for anything in future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pixmin @toddmotto