6656 2006-01-18 15:12:26 -0800 Image loading continues when IMG elements or Image JavaScript objects are removed 2026-01-12 09:02:51 -0800 1 1 1 Unclassified WebKit Page Loading 420+ Mac OS X 10.4 NEW https://bugs.webkit.org/show_bug.cgi?id=35377 HasReduction, InRadar P2 Major --- 1 thomas sabouhallawa ap beidson bryan chas.conway dpaddock graouts holidaymaker268 ian javan jonlee julio.viera kyl3h0tchk1ss lbzwischenbrugger mrowe paradox460 raushnigupta8 rawatdeepakg sabouhallawa simon.fraser tonikitoo webkit-bug-importer webkitbugzilla oldest_to_newest 28847 0 thomas 2006-01-18 15:12:26 -0800 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. 28848 1 5764 thomas 2006-01-18 15:13:26 -0800 Created attachment 5764 Simplified test cases for plain HTML, JavaScript Image objects and generated HTML (watch the activity window) 28849 2 mrowe 2006-01-18 15:18:19 -0800 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. 304 3 chas.conway 2007-09-19 08:29:22 -0700 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. 289 4 hyatt 2007-09-19 13:31:46 -0700 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.) 285 5 chas.conway 2007-09-19 13:42:00 -0700 (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? 101804 6 wichert 2008-12-08 02:08:26 -0800 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. 115337 7 mrowe 2009-03-26 09:03:54 -0700 <rdar://problem/6726455> 117958 8 bryan 2009-04-17 12:53:51 -0700 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. 185571 9 kyl3h0tchk1ss 2010-01-28 12:23:34 -0800 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. 193902 10 ap 2010-02-25 15:55:03 -0800 *** Bug 35377 has been marked as a duplicate of this bug. *** 194112 11 lbzwischenbrugger 2010-02-26 08:27:04 -0800 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. 197518 12 lbzwischenbrugger 2010-03-09 03:22:36 -0800 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. 217442 13 paradox460 2010-04-26 19:20:52 -0700 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 457820 14 ap 2011-08-26 15:42:33 -0700 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. 457857 15 simon.fraser 2011-08-26 16:53:20 -0700 I reopened bug 35377. 457901 16 lbzwischenbrugger 2011-08-26 19:18:41 -0700 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. 1430173 17 beidson 2018-06-05 12:24:50 -0700 Talking to a dev from BaseCamp right now at WWDC. "In other browsers, doing something to get an IMG created does not synchronously start a network load - That only happens after the runloop spins. WebKit synchronously starts the load, even JS immediately sets the src the null. This is super duper wasteful in our app (We clone dom trees, etc etc)" 1430427 18 javan 2018-06-06 08:01:32 -0700 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! 5764 2006-01-18 15:13:26 -0800 2006-01-18 15:14:44 -0800 Simplified test cases for plain HTML, JavaScript Image objects and generated HTML (watch the activity window) image_loading_bug.html text/html 554 thomas PGRpdiBpZD0iY29udGFpbmVyIj4KICA8aW1nIHNyYz0iZmFrZV9mcm9tX2h0bWwuanBnIiBhbHQ9 IiIgLz4KPC9kaXY+CjxzY3JpcHQ+CiAgLy8gY2FzZSAxIC0gaW4gSFRNTAogIGRvY3VtZW50Lmdl dEVsZW1lbnRCeUlkKCdjb250YWluZXInKS5pbm5lckhUTUwgPSAiIjsKICAKICAvLyBjYXNlIDIg LSBpbiBKUwogIHZhciBpID0gbmV3IEltYWdlKCk7CiAgaS5zcmMgPSAiZmFrZV9mcm9tX2pzLmpw ZyI7CiAgZGVsZXRlIGk7CiAgCiAgLy8gY2FzZSAzIC0gZXhwYW5kZWQgSFRNTCBleGFtcGxlCiAg dmFyIGh0bWxmcmFnbWVudCA9ICIiOwogIGZvcih2YXIgbG9vcD0wO2xvb3A8MTAwO2xvb3ArKykK ICAgIGh0bWxmcmFnbWVudCArPSAoJzxpbWcgc3JjPSJmYWtlX2Zyb21faHRtbF9sb29wXycgKyBs b29wICsgJy5qcGciIGFsdD0iIiAvPicpCgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjb250 YWluZXInKS5pbm5lckhUTUwgPSBodG1sZnJhZ21lbnQ7CiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5 SWQoJ2NvbnRhaW5lcicpLmlubmVySFRNTCA9ICIiOwo8L3NjcmlwdD4=