Skip to content

GitLab

T
tangled
Commit 9e853511 authored by Chris Harrelson's avatar Chris Harrelson Committed by Commit Bot
Browse files
Options

Remove broken icon rendering for loading="lazy" images while loading 

Non-lazy images don't show this icon. It's incorrect to show such
an icon just because an image is loading. In addition, it messes
up the intrinsic sizing heuristics for aspect ratio.

Both lazy and non-lazy images still show a broken image icon when
images fail to load via HTTP failure.

Bug: 997606, 1045745

Change-Id: I5dc6bac50a1c43395057e37547864e9e3fc13b6d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2109330
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: default avatarrajendrant <rajendrant@chromium.org>
Reviewed-by: default avatarScott Little <sclittle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#754213}
parent 28f510f3
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 2 deletions
third_party/blink/renderer/core/loader/image_loader.cc
View file @ 9e853511
......@@ -307,6 +307,9 @@ bool ImageLoader::ShouldUpdateOnInsertedInto(
}
bool ImageLoader::ImageIsPotentiallyAvailable() const {
bool is_lazyload = lazy_image_load_state_ == LazyImageLoadState::kDeferred &&
was_fully_deferred_;
bool image_has_loaded = image_content_ && !image_content_->IsLoading() &&
!image_content_->ErrorOccurred();
bool image_still_loading = !image_has_loaded && HasPendingActivity() &&
......@@ -329,7 +332,7 @@ bool ImageLoader::ImageIsPotentiallyAvailable() const {
// ImageResourceContent has non-null image data associated with it, which
// isn't folded into |image_has_loaded| above.
return (image_has_loaded && image_has_image) || image_still_loading ||
image_is_document;
image_is_document || is_lazyload;
}
void ImageLoader::ClearImage() {
......@@ -594,11 +597,16 @@ void ImageLoader::DoUpdateFromElement(
new_image_content == old_image_content) {
ToLayoutImage(element_->GetLayoutObject())->IntrinsicSizeChanged();
} else {
bool is_lazyload =
lazy_image_load_state_ == LazyImageLoadState::kDeferred &&
was_fully_deferred_;
// Loading didn't start (loading of images was disabled). We show fallback
// contents here, while we don't dispatch an 'error' event etc., because
// spec-wise the image remains in the "Unavailable" state.
if (new_image_content &&
new_image_content->GetContentStatus() == ResourceStatus::kNotStarted)
new_image_content->GetContentStatus() == ResourceStatus::kNotStarted &&
!is_lazyload)
NoImageResourceToLoad();
if (pending_load_event_.IsActive())
......
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow-aspect-ratio-ref.html 0 → 100644
View file @ 9e853511
<!doctype HTML>
<span style="display: inline-block; width: 100px; height: 50px; border: 1px solid black">
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow-aspect-ratio.html 0 → 100644
View file @ 9e853511
<!DOCTYPE html>
<html style="reftest-wait">
<link rel="match" href="image-loading-lazy-slow-aspect-ratio-ref.html">
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-img-element">
<script src="/common/reftest-wait.js"></script>
<img id=target loading="lazy" src="resources/image.png"
width="200" height="100" style="width: 100px; height: auto; border: 1px solid black">
<script>
let loaded = false;
target.onload = () => {
if (loaded) return;
loaded = true;
target.src = "";
requestAnimationFrame(() => requestAnimationFrame(() => {
target.src = "resources/image.png?pipe=trickle(d2)";
takeScreenshot();
}));
};
</script>
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow-ref.html 0 → 100644
View file @ 9e853511
<!DOCTYPE html>
<span style="display: inline-block; width: 330px; height: 254px; border: 1px solid black"></span>
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow.html 0 → 100644
View file @ 9e853511
<!DOCTYPE html>
<html style="reftest-wait">
<link rel="match" href="image-loading-lazy-slow-ref.html">
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-img-element">
<script src="/common/reftest-wait.js"></script>
<img id=target loading="lazy" src="resources/image.png"
width="330" height="254" style="border: 1px solid black">
<script>
let loaded = false;
target.onload = () => {
if (loaded) return;
loaded = true;
target.src = "";
requestAnimationFrame(() => requestAnimationFrame(() => {
target.src = "resources/image.png?pipe=trickle(d2)";
takeScreenshot();
}));
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment