2

I want to create an image progress-bar library so I need an event while loading images to update the progress-bar (e.g. onprogress)

Suppose I'm going to load all images with creating an XHR Request to have onprogress event, so I need to know is there any difference between these scenarios:

First:
1- Load images with XHR request
2- Append an img tag, points to the image url (e.g. <img src='boo.png' />)

Second:
1- Load images with XHR request
2- Append an img tag with the base64 of XHR response (e.g. <img src='data:image/png;base64,==Ad3tr' />)

Afshin Mehrabani
  • 33,262
  • 29
  • 136
  • 201
  • If load image with url, the image will be cached in browser, [see this answer.][1] [1]: http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image/12714338#12714338 – Mohsen Esmailpour Sep 28 '13 at 07:29
  • Browser will cache the URL regardless (subject to the behavior specified by the response cache headers, of course). 'Doesn't matter if you're using Image or XHR to fetch the resource. – broofa Oct 02 '13 at 00:09
  • @broofa So If I create a XHR request to an image, it will be cached on the browser, right? – Afshin Mehrabani Oct 02 '13 at 05:59
  • 1
    @AfshinMehrabani - Yup. You can verify on Chrome or Firefox by entering "about:cache" in the location field after making the XHR request to see if your URL is listed. – broofa Oct 02 '13 at 19:20
  • @AfshinMehrabani - just realized I misinterpreted your question. Updated my answer. – broofa Nov 25 '13 at 13:23

1 Answers1

2

Edit: Belatedly realized you weren't asking about IMG .vs. XHR image loading but, rather, two different approaches to using XHR. Keeping my original answer, below, since it has info about the IMG .vs. XHR differences that are probably still of interest here.

Briefly, there's a pretty big difference in terms of overall complexity. Using a data-url to put XHR data into an IMG object is a non-trivial problem - see this SO question. It relies on new APIs that may not be fully supported, and there are several performance implications: increased page load time to load the JS needed, CPU cycles needed to encode the response data, and additional time required to garbage collect all the extra memory needed.

I put together a jsperf test to compare the two approaches but note that the data-url test is incomplete(!) - it doesn't actually produce a valid URL, but it does utf8 + base64 so it's probably not-horrible for a comparison. But, if anything, it's faster than what you'll end up with.

Basically I can't think of any advantage to using a data-url, other than that it avoids having to rely on the browser cache... but I expect that's little more than a theoretical objection

With XHR-based image loading you're dealing with ...

  1. Limited support for fetching binary (image) data: The XHR responseType property is designed to allow this, but isn't available on all browsers. Thus, you'll need to look into workarounds there.
  2. Limited support for base64-encoding. IE9- doesn't support atob, thus you'll have to rely on a JS shim. This will have performance implications for both CPU and garbage collection, which may or may not concern you
  3. Limited support for fetching cross-domain resources. XHR requests have to be same-origin unless you implement server support for CORS. And, again, not all browsers (IE9-, no surprise) fully support CORS.
Community
  • 1
  • 1
broofa
  • 37,461
  • 11
  • 73
  • 73