Browse files

use pure js url absolutification with resizeImage()

  • Loading branch information...
1 parent afc8bfd commit 9882642ad711bd7d90a9f8b447fa23cf12408d1f @noahadams noahadams committed Jun 13, 2012
Showing with 8 additions and 9 deletions.
  1. +5 −7 api/resizeImages.js
  2. +3 −2 tests/resizeImages.html
View
12 api/resizeImages.js
@@ -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'
@@ -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]
@@ -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))
}
});
}
View
5 tests/resizeImages.html
@@ -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 -->
@@ -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)

4 comments on commit 9882642

@noahadams
Mobify Research & Development Inc. member
@tedtate

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

@noahadams
Mobify Research & Development Inc. member

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

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.