[Webkit-unassigned] [Bug 6656] Image loading continues when IMG elements or Image JavaScript objects are removed

Wed Jun 6 08:01:32 PDT 2018

https://bugs.webkit.org/show_bug.cgi?id=6656

--- Comment #18 from Javan Makhmali <javan at javan.us> ---
Hello, another Basecamp developer here with more details.

We use `MutationObserver` to detect when images are added to the DOM and swap their "src" attribute with a tiny placeholder image. Then we restore the original "src" as images are scrolled into the viewport. This technique is commonly referred to as “lazy loading” and is intended to avoid unnecessary network requests for images that may never be viewed.

Due to this WebKit issue, our approach doesn’t work in Safari because the original image is always loaded.

Additionally (this may be a separate issue), cloning <img> elements causes them to load *again* even if the cloned node is detached from the DOM. For example, running `document.body.cloneNode(true)` reloads all of its images. This affects our Turbolinks (https://github.com/turbolinks/turbolinks) library, which stores “snapshots” of pages by cloning them.

I made a video to help illustrate the problem: https://www.youtube.com/watch?v=p6bkcjoyP1M

In Safari (left), every image on the page is loaded initially, and then loaded again when scrolled into view. Cloning <body> loads all of its images once more.

In Chrome (right), only the first image loads initially and the rest are canceled. Cloning <body> makes no additional network requests.

My example application and its source code are available here: https://glitch.com/~jealous-moon

Thanks for your time!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180606/ca54846d/attachment.html>