Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Optimization with image loading
- Loading branch information
Showing
with
50 additions
and
34 deletions.
-
+17
−13
build/framer.js
-
+16
−8
src/views/imageview.coffee
-
+17
−13
template/framer.js
|
|
@@ -1,7 +1,7 @@ |
|
|
// Framer v2.0.0b1-36-g3ad0dc0 (c) 2013 Koen Bok |
|
|
// Framer v2.0.0b1-38-ged0c03b (c) 2013 Koen Bok |
|
|
// https://github.com/koenbok/Framer |
|
|
|
|
|
window.FramerVersion = "v2.0.0b1-36-g3ad0dc0"; |
|
|
window.FramerVersion = "v2.0.0b1-38-ged0c03b"; |
|
|
|
|
|
|
|
|
(function(){var require = function (file, cwd) { |
|
@@ -4552,23 +4552,27 @@ require.define("/src/views/imageview.coffee",function(require,module,exports,__d |
|
|
return this._image; |
|
|
}, |
|
|
set: function(value) { |
|
|
var loader, |
|
|
var loader, _ref, _ref1, |
|
|
_this = this; |
|
|
|
|
|
if (this._image === value) { |
|
|
return this.emit("load", loader); |
|
|
} |
|
|
this._image = value; |
|
|
loader = new Image(); |
|
|
loader.name = this.image; |
|
|
loader.src = this.image; |
|
|
loader.onload = function() { |
|
|
_this.style["background-image"] = "url('" + _this.image + "')"; |
|
|
return _this.emit("load", loader); |
|
|
}; |
|
|
return loader.onerror = function() { |
|
|
return _this.emit("error", loader); |
|
|
}; |
|
|
if ((_ref = this.events) != null ? _ref.hasOwnProperty("load" || ((_ref1 = this.events) != null ? _ref1.hasOwnProperty("error") : void 0)) : void 0) { |
|
|
loader = new Image(); |
|
|
loader.name = this.image; |
|
|
loader.src = this.image; |
|
|
loader.onload = function() { |
|
|
_this.style["background-image"] = "url('" + _this.image + "')"; |
|
|
return _this.emit("load", loader); |
|
|
}; |
|
|
return loader.onerror = function() { |
|
|
return _this.emit("error", loader); |
|
|
}; |
|
|
} else { |
|
|
return this.style["background-image"] = "url('" + this.image + "')"; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
@@ -25,13 +25,21 @@ class exports.ImageView extends View |
|
|
|
|
|
@_image = value |
|
|
|
|
|
loader = new Image() |
|
|
loader.name = @image |
|
|
loader.src = @image |
|
|
# As an optimization, we will only use a loader |
|
|
# if something is explicitly listening to the load event |
|
|
|
|
|
loader.onload = => |
|
|
@style["background-image"] = "url('#{@image}')" |
|
|
@emit "load", loader |
|
|
if @events?.hasOwnProperty "load" or @events?.hasOwnProperty "error" |
|
|
|
|
|
loader.onerror = => |
|
|
@emit "error", loader
|
|
|
loader = new Image() |
|
|
loader.name = @image |
|
|
loader.src = @image |
|
|
|
|
|
loader.onload = => |
|
|
@style["background-image"] = "url('#{@image}')" |
|
|
@emit "load", loader |
|
|
|
|
|
loader.onerror = => |
|
|
@emit "error", loader |
|
|
|
|
|
else |
|
|
@style["background-image"] = "url('#{@image}')"
|
|
|
@@ -1,7 +1,7 @@ |
|
|
// Framer v2.0.0b1-36-g3ad0dc0 (c) 2013 Koen Bok |
|
|
// Framer v2.0.0b1-38-ged0c03b (c) 2013 Koen Bok |
|
|
// https://github.com/koenbok/Framer |
|
|
|
|
|
window.FramerVersion = "v2.0.0b1-36-g3ad0dc0"; |
|
|
window.FramerVersion = "v2.0.0b1-38-ged0c03b"; |
|
|
|
|
|
|
|
|
(function(){var require = function (file, cwd) { |
|
@@ -4552,23 +4552,27 @@ require.define("/src/views/imageview.coffee",function(require,module,exports,__d |
|
|
return this._image; |
|
|
}, |
|
|
set: function(value) { |
|
|
var loader, |
|
|
var loader, _ref, _ref1, |
|
|
_this = this; |
|
|
|
|
|
if (this._image === value) { |
|
|
return this.emit("load", loader); |
|
|
} |
|
|
this._image = value; |
|
|
loader = new Image(); |
|
|
loader.name = this.image; |
|
|
loader.src = this.image; |
|
|
loader.onload = function() { |
|
|
_this.style["background-image"] = "url('" + _this.image + "')"; |
|
|
return _this.emit("load", loader); |
|
|
}; |
|
|
return loader.onerror = function() { |
|
|
return _this.emit("error", loader); |
|
|
}; |
|
|
if ((_ref = this.events) != null ? _ref.hasOwnProperty("load" || ((_ref1 = this.events) != null ? _ref1.hasOwnProperty("error") : void 0)) : void 0) { |
|
|
loader = new Image(); |
|
|
loader.name = this.image; |
|
|
loader.src = this.image; |
|
|
loader.onload = function() { |
|
|
_this.style["background-image"] = "url('" + _this.image + "')"; |
|
|
return _this.emit("load", loader); |
|
|
}; |
|
|
return loader.onerror = function() { |
|
|
return _this.emit("error", loader); |
|
|
}; |
|
|
} else { |
|
|
return this.style["background-image"] = "url('" + this.image + "')"; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|