Bug 6656 - Image loading continues when IMG elements or Image JavaScript objects are removed
: Image loading continues when IMG elements or Image JavaScript objects are rem...
Status: NEW
: WebKit
Page Loading
: 420+
: Macintosh Mac OS X 10.4
: P2 Major
Assigned To:
:
: HasReduction, InRadar, ReviewedForRadar
:
:
  Show dependency treegraph
 
Reported: 2006-01-18 15:12 PST by
Modified: 2014-02-14 09:39 PST (History)


Attachments
Simplified test cases for plain HTML, JavaScript Image objects and generated HTML (watch the activity window) (554 bytes, text/html)
2006-01-18 15:13 PST, Thomas Fuchs
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2006-01-18 15:12:26 PST
When IMG elements or JavaScript Image objects are completely removed (setting .innerHTML of a container 
to an empty string or deleting the Image object) image loading continues in the background.
------- Comment #1 From 2006-01-18 15:13:26 PST -------
Created an attachment (id=5764) [details]
Simplied test cases for plain HTML, JavaScript Image objects and generated HTML
------- Comment #2 From 2006-01-18 15:18:19 PST -------
It seems logical to me that removing the image completely from the page by the three means shown 
should cancel loading the image.  Thanks for the great test case Thomas.
------- Comment #3 From 2007-09-19 08:29:22 PST -------
I was about to file a similar bug regarding identical behavior with MJPG streams.  I am trying to switch an image's source between a static and motion jpeg file to save bandwidth when the video is not needed, but no matter what I do to it, short of reloading the page, it continues to load the MJPG data stream once it's been requested once.

http://discord.itg.uiuc.edu/testing/MJPG_test.html

This video stream may sometimes be black, but you will still see ~100KB/s in the activity monitor.  This test case shows that the MJPG stream continues downloading after switching the src to a static image and even after deleting the image's DOM node.
------- Comment #4 From 2007-09-19 13:31:46 PST -------
This is actually by design.  I can see how it would be bad if the resource is large though.  (The idea is to go ahead and let the load complete so that the image gets into the cache to be resuable.)
------- Comment #5 From 2007-09-19 13:42:00 PST -------
(In reply to comment #4)
> This is actually by design.  I can see how it would be bad if the resource is
> large though.  (The idea is to go ahead and let the load complete so that the
> image gets into the cache to be resuable.)
> 

That's good to know.

I don't know much about MJPG resources;  can they be finite-length as well?  In this case the MJPG stream is live and continues on forever negating any reason to try caching it.  Is there a way to detect that the stream is not finite and cancel the behavior?
------- Comment #6 From 2008-12-08 02:08:26 PST -------
What was the design decision made here?

This issue breaks image lazy loading tricks, making pages with many images below the fold extremely expensive for people using webkit.
------- Comment #7 From 2009-03-26 09:03:54 PST -------
<rdar://problem/6726455>
------- Comment #8 From 2009-04-17 12:53:51 PST -------
Can someone please advise what the status of this bug is? And what is the link in the previous comment for? ("<rdar://problem/6726455>"). Thank you.
------- Comment #9 From 2010-01-28 12:23:34 PST -------
http://www.appelsiini.net/projects/lazyload .. Why can't the model of this plugin just be applied, or maybe when it sees something like this used, it doesn't ignore it.
------- Comment #10 From 2010-02-25 15:55:03 PST -------
*** Bug 35377 has been marked as a duplicate of this bug. ***
------- Comment #11 From 2010-02-26 08:27:04 PST -------
Finish loading or not


If the src attribute of an image is changed by javascript
a new Image will be loaded.
In some cases the previous loaded image is not fully loaded. It is a "nice
idea" to complete loading for caching reasons.
But there are some problems with that.


Loading continues also when an image Element is removed from
DOM tree or an Image object is deleted.


Dealing with partly loaded Images
-----------------------------------
I see 3 possibilities

A.) Continue loading even if the image is not requested anymore

WebKit Browsers continue loading. Firefox stops loading.
If the image is loaded to 99% it's cool to continue loading for cache.
If it's many times only 10% it makes the app slow.


B.) Stop loading, dump the partly loaded images

If the programmer needs to preload images he/she can do that with an Image Object.
It's also possible to create an Element with tagName "img" an, set the src Attribute and
set the style to display:none. If the images is needed change display property to "" or "inline" with javascript;


C.) Stop loading, save the partly loaded images. If the image is requested again load the rest of the image. 

see:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
14.16 Content-Range

That would be cool if it's really fast code.
I don't knoww if web servers loose speed with in aktive
"Content-Range" http header. This is als used for 
large file downloads.

More details on this header:
http://www.west-wind.com/WebLog/posts/244.aspx


WebKit Status:
--------------
There is no possibility for programmers to abort loading an image.
Webkit has a really fast image rendering and zoom engine. 

For web applications (browser maps) that deal with lots of images 
it's good to have excellent image rendering.
However, the user will not be really satisfied - because of this
image loading issue.
------- Comment #12 From 2010-03-09 03:22:36 PST -------
Here is a more komplex testcase:
http://www.khtml.org/webkitbug/
It's webmap. if you zoom in/out very fast, firefox is fast loading the images.
Btw. if an images has in Etag but is in cache, the image could be displayed immediately. If the ETag has changed the picture on the page can be changed for the new one.
------- Comment #13 From 2010-04-26 19:20:52 PST -------
This script is probably the most common use of this technique
http://www.appelsiini.net/projects/lazyload

An example can be seen here:
http://www.appelsiini.net/projects/lazyload/enabled.html
------- Comment #14 From 2011-08-26 15:42:33 PST -------
It's my fault that this bug is about two separate issues now (removing an element or changing its src). Even though both are by design, these are not identical.

Perhaps bug 35377 should be un-duped.
------- Comment #15 From 2011-08-26 16:53:20 PST -------
I reopened bug 35377.
------- Comment #16 From 2011-08-26 19:18:41 PST -------
I reported bug 35377 and also made a comment here for the same bug.
For me it looks pretty much the same.

There are many methods to cancel image loading:

img.setAttribute("src","");
img.src="";
img.parentNode.innerHTML="";
img.parentNode.textContent="";
img.parentNode.removeChild(img);
img.parentNode.replaceChild(img2);
(maybe not complete)


btw. when I reported this bug I was in Cambodia and had a slow internet connection. Bandwidth was about 300 kBit shared for a guesthouse, the ping indicated that it was a satellite link.
Under this conditions webkit browsers are not the first choice mainly because of the bug I think.
Now I'm connected to the internet with a 10MBit line again and here I don't feel a bad impact of the bug. To find a good solution, the programmer maybe should simulate slow internet speed as you find in many parts of this world.
"netem" could do that for example.