helpers\ImageLazifier: set placeholder src #1204
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jtojnar
force-pushed
the
lazyimg-dims
branch
2 times, most recently
from
ceaf592
to
6fd4b63
Compare
So that they are easier to use.
Entries set width to 100% and add a padding. Since web browsers use content-box sizing by default, it was overflowing the page.
With lazy loading of images enabled, `img` tags did not have a `src` attribute, causing the browsers to render them as zero-height boxes. This made it impossible to determine the precise height of the article content, leading to articles sometimes being rendered in column view, even though they would not fit a single screen with images loaded. In Firefox, it is possible to use broken non-image (e.g. about:blank page) and it will render a rectangle respecting the width and height ratio, there must be no alt attribute, though. And Chromium will not respect the aspect ratio either. https://jsfiddle.net/jtojnar/yrdskx0n/5/ It is also possible to use a real image (e.g. 1×1 px dot) but then the `height: auto` in CSS causes the images to respect the size of the placeholder, not the specified dimensions. For that reason we need to use a placeholder of the same dimensions as the original image. This will not help for images that do not specify dimensions but then again, we cannot know their dimension until they are loaded anyway, so let’s just fall back to 800×600 as a guess.
Use `data-selfoss-src` attribute instead of the invalid `ref` attribute.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
With lazy loading of images enabled,
imgtags did not have asrcattribute, causing the browsers to render them as zero-height boxes. This made it impossible to determine the precise height of the article content, leading to articles sometimes being rendered in column view, even though they would not fit a single screen with images loaded.In Firefox, it is possible to use broken non-image (e.g. about:blank page) and it will render a rectangle respecting the width and height ratio, there must be no alt attribute, though. And Chromium will not respect the aspect ratio either.
https://jsfiddle.net/jtojnar/yrdskx0n/5/
It is also possible to use a real image (e.g. 1×1 px dot) but then the
height: autoin CSS causes the images to respect the size of the placeholder, not the specified dimensions. For that reason we need to use a placeholder of the same dimensions as the original image.This will not help for images that do not specify dimensions but then again, we cannot know their dimension until they are loaded anyway, so let’s just fall back to 800×600 as a guess.
Closes: #1203