Skip to content

Downloads of unmounted images aren't canceled #290

@devxzero

Description

@devxzero

Background info:
When the browser starts to download an image via a plain html img tag, and the img tag is removed from the DOM while the image is being downloaded or even before the image download starts, the browser will continue to download the image. This problem doesn't occur in plain non-JS server side rendered application, because a new HTTP page request will abort all images. But for JavaScript applications, the images have to be aborted manually by setting the src attribute to an empty-string. More info about this problem is shown here: https://stackoverflow.com/questions/59270779/react-downloads-pending-images-of-previous-render
If no solution would be implemented, this would cause the downloading (and loading) of images to be stacked/accumulated invisibly in the browser, which causes bandwidth waste. It also causes a delay in the rendering of new pages, because the browser will first download all images from all previously closed pages.
(Personally, I think this is a flaw in the DOM standard. )

Fixed in React-Image since 2.1.1?
There was a pull request which would automatically cancel image download when those images were umounted. #223
Which included a plain JavaScript demo to demonstrate that cancellation is possible in the DOM: https://jsbin.com/zakeqaseru/1/edit?output

A solution was implemented in React-Image 2.1.0 with a fix followed in 2.1.1: https://github.com/mbrevda/react-image/blob/master/CHANGELOG.md

But React-Image doesn't seem to cancel the download on unmount. You can verify this here:
https://codesandbox.io/s/upbeat-hopper-kucou
https://kucou.csb.app/

(Apart from the image cancellation problem, for some unknown reason, CodeSandbox gives an error for React-Image 2.x, but does work for 4.x. But I have also tried it locally, were is does run, but still has the cancellation problem.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions