Fixed not lazily loading for explicit loading=lazy image

Previously when a image element is invisible, it loads image eagerly for both 'auto' and 'lazy' by https://chromium-review.googlesource.com/c/chromium/src/+/1668710 But when attribute is set 'lazy' explicitly, we can still use lazy loading because lazy loading is intended. Bug: 1027153 Change-Id: Ibb0ad782049c66863d242d929f1e94fa6ddd1ed0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1950104Reviewed-by: Dominic Farolino <dom@chromium.org> Reviewed-by: Kinuko Yasuda <kinuko@chromium.org> Reviewed-by: Scott Little <sclittle@chromium.org> Commit-Queue: Wanchang Ryu <wanchang.ryu@lge.com> Cr-Commit-Position: refs/heads/master@{#721911}

Fixed not lazily loading for explicit loading=lazy image
Previously when a image element is invisible, it loads image eagerly for both 'auto' and 'lazy' by https://chromium-review.googlesource.com/c/chromium/src/+/1668710 But when attribute is set 'lazy' explicitly, we can still use lazy loading because lazy loading is intended. Bug: 1027153 Change-Id: Ibb0ad782049c66863d242d929f1e94fa6ddd1ed0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1950104Reviewed-by: Dominic Farolino <dom@chromium.org> Reviewed-by: Kinuko Yasuda <kinuko@chromium.org> Reviewed-by: Scott Little <sclittle@chromium.org> Commit-Queue: Wanchang Ryu <wanchang.ryu@lge.com> Cr-Commit-Position: refs/heads/master@{#721911}
26e4f728 · Wanchang Ryu · Commit Bot · d82618ea · 26e4f728 · 26e4f728
Commit 26e4f728 authored Dec 05, 2019 by Wanchang Ryu Committed by Commit Bot Dec 05, 2019
2 changed files
--- a/third_party/blink/renderer/core/html/lazy_load_image_observer.cc
+++ b/third_party/blink/renderer/core/html/lazy_load_image_observer.cc
@@ -18,6 +18,7 @@
 #include "third_party/blink/renderer/core/frame/web_feature.h"
 #include "third_party/blink/renderer/core/html/html_image_element.h"
 #include "third_party/blink/renderer/core/html_element_type_helpers.h"
+#include "third_party/blink/renderer/core/html_names.h"
 #include "third_party/blink/renderer/core/inspector/console_message.h"
 #include "third_party/blink/renderer/core/intersection_observer/intersection_observer.h"
 #include "third_party/blink/renderer/core/intersection_observer/intersection_observer_entry.h"
@@ -218,7 +219,10 @@ void LazyLoadImageObserver::LoadIfNearViewport(
  for (auto entry : entries) {
    Element* element = entry->target();
    auto* image_element = DynamicTo<HTMLImageElement>(element);
-    if (!entry->isIntersecting() && image_element) {
+    // If the loading_attr is 'lazy' explicitly, we'd better to wait for
+    // intersection.
+    if (!entry->isIntersecting() && image_element &&
+        !EqualIgnoringASCIICase(image_element->FastGetAttribute(html_names::kLoadingAttr), "lazy")) {
      // Fully load the invisible image elements. The elements can be invisible
      // by style such as display:none, visibility: hidden, or hidden via
      // attribute, etc. Style might also not be calculated if the ancestors

--- a/third_party/blink/web_tests/external/wpt/loading/lazyload/disconnected-image-loading-lazy.tentative.html
+++ b/third_party/blink/web_tests/external/wpt/loading/lazyload/disconnected-image-loading-lazy.tentative.html
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+async_test(function(t) {
+  x = new Image();
+  x.loading = "auto";
+  x.src = "resources/image.png?auto";
+  x.onload = e => {
+    t.step(function() {
+      t.step_func_done();
+    });
+  };
+  t.step_timeout(function() { t.done(); }, 2000);
+}, "loading=auto for disconnected image");
+async_test(function(t) {
+  x = new Image();
+  x.loading = "lazy";
+  x.src = "resources/image.png?lazy";
+  x.onload = e => {
+    t.step(function() {
+      t.unreached_func("Disconnected image with loading=lazy should be loaded lazily.");
+    });
+  };
+  t.step_timeout(function() { t.done(); }, 2000);
+}, "loading=lazy for disconnected image");
+</script>
+</body>