Skip to content
This repository has been archived by the owner on Aug 5, 2020. It is now read-only.

Commit

Permalink
use pure js url absolutification with resizeImage()
Browse files Browse the repository at this point in the history
  • Loading branch information
@noahadams
noahadams committed Jun 14, 2012
1 parent afc8bfd commit 9882642
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 9 deletions.
12 changes: 5 additions & 7 deletions api/resizeImages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
// 4) Give me a goddamn prize
(function(window, $) {

var absolutify = document.createElement('a')

, hosts = [
var hosts = [
'//ir0.mobify.com'
, '//ir1.mobify.com'
, '//ir2.mobify.com'
Expand Down Expand Up @@ -37,7 +35,7 @@ var absolutify = document.createElement('a')
* Returns a URL suitable for use with the 'ir' service.
* :host/:format:quality/:width/:height/:url
*/
, getImageURL = Mobify.getImageURL = function(url, options) {
, getImageResizeURL = Mobify.getImageResizeURL = function(url, options) {
options = options || {}

var host = hosts[URLHash(url) % hosts.length]
Expand Down Expand Up @@ -83,10 +81,10 @@ var absolutify = document.createElement('a')
}
}

return $imgs.each(function() {
return $imgs.each(function() {
if (attr = this.getAttribute(opts.attribute)) {
absolutify.href = attr;
this.setAttribute('x-src', getImageURL(absolutify.href, opts))
var absoluteURL = Mobify.util.absolutizeURI(document.baseURI, attr)
this.setAttribute(defaults.attribute, getImageResizeURL(absoluteURL, opts))
}
});
}
Expand Down
5 changes: 3 additions & 2 deletions tests/resizeImages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ <h2 id="qunit-userAgent"></h2>

<script src="../vendor/zepto.js"></script>
<script>Mobify = {$: $};</script>
<script src="../api/util.js"></script>
<script src="../api/resizeImages.js"></script>

<!-- TESTS -->
Expand All @@ -49,12 +50,12 @@ <h2 id="qunit-userAgent"></h2>
});

test('Mobify.getImageURL', function() {
var got = Mobify.getImageURL('http://test/image.jpg')
var got = Mobify.getImageResizeURL('http://test/image.jpg')
, vow = '//ir2.mobify.com/http://test/image.jpg'

equal(got, vow)

got = Mobify.getImageURL('http://test/image.jpg', {maxWidth: 320})
got = Mobify.getImageResizeURL('http://test/image.jpg', {maxWidth: 320})
vow = '//ir2.mobify.com/320/http://test/image.jpg'

equal(got, vow)
Expand Down

4 comments on commit 9882642

@noahadams
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

http://jsperf.com/make-url-absolute-dom-vs-js/4 :\

@tedtate
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this faster for you on test devices? I just gave it a whirl on my desktop browser and found around 3x quicker...

@noahadams
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This pure JS version runs like a dog on my first gen iPod touch, DOM version is like 3x faster, but this is a very ambitious full URL parser, John and Ryan pointed out ot me that we don't need to be this careful, we can, for instance, leave it to the browser to resolve ./ and ../, and we probably don't need to handle non http/https urls

@romanrudenko
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is performance of URL transformation really a critical component of overall processing? If not, we should use simplest possible implementation (DOM one). If you are handling enough URLs to make URL mangling time measurable, you have far bigger problems on your hands (such as load time of all that cornucopia of images).

Please sign in to comment.