├── README
├── jquery.retina.coffee
└── jquery.retina.js
/README:
--------------------------------------------------------------------------------
1 | Usage:
2 | $().retina([settings]);
3 |
4 | settings:
5 | A set of key/value pairs. All settings are optional.
6 |
7 | retina-background (default: false)
8 | Whether to change background image to high resolution.
9 |
10 | retina-suffix (default: @2x)
11 | The suffix for high resolution image file.
12 |
13 | Example:
14 |
15 |
--------------------------------------------------------------------------------
/jquery.retina.coffee:
--------------------------------------------------------------------------------
1 | $ = JQuery
2 | $.fn.retina = (options) ->
3 | settings = { 'retina-background': false, 'retina-suffix': "@2x" }
4 | if options
5 | $.extend settings, options
6 |
7 | preload = (path, callback) ->
8 | img = new Image()
9 | img.onload = ->
10 | callback img
11 | img.src = path
12 |
13 | if window.devicePixelRation > 1
14 | @each ->
15 | element = $(@)
16 | if (@tagName.toLowerCase() is 'img') and element.attr("src")
17 | path = element.attr('src').replace(/\.(?!.*\.)/, "#{settings['retina-suffix']}.")
18 | preload path, (img) ->
19 | element.attr 'src', img.src
20 | imgHtml = $('
').append(element.clone()).remove().html()
21 | if not /(width|height)=["']\d+['"]/.test imgHtml
22 | element.attr 'width', img.width / 2
23 |
24 | if settings['retina-background']
25 | backgroundImageUrl = element.css('background-image')
26 | if /^url\(.*)$/.test(backgroundImageUrl)
27 | path = backgroundImageUrl.substring 4, backgroundImageUrl.length - 1
28 | path = path.replace /\.(?!.*\.)/, "#{settings['retina-suffix']}."
29 | preload path, (img) ->
30 | element.css 'background-image', "url(#{img.src})"
31 | if element.css('background-size') is 'auto auto'
32 | element.css 'background-size', "#{img.width / 2}px auto"
33 | return
34 |
--------------------------------------------------------------------------------
/jquery.retina.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $.fn.retina = function(options) {
3 | var settings = {
4 | "retina-background" : false,
5 | "retina-suffix" : "@2x"
6 | };
7 | if (options) {
8 | $.extend(settings, options);
9 | }
10 | var preload = function(path, callback) {
11 | var img = new Image();
12 | img.onload = function() { callback(img) };
13 | img.src = path;
14 | };
15 | if (window.devicePixelRatio > 1) {
16 | this.each(function() {
17 | var element = $(this);
18 | if (this.tagName.toLowerCase() == "img" && element.attr("src")) {
19 | var path = element.attr("src").replace(/\.(?!.*\.)/, settings["retina-suffix"] +".");
20 | preload(path, function(img) {
21 | element.attr("src", img.src);
22 | var imgHtml = $("
").append(element.clone()).remove().html();
23 | if (!(/(width|height)=["']\d+["']/.test(imgHtml))) {
24 | element.attr("width", img.width / 2);
25 | }
26 | });
27 | }
28 | if (settings["retina-background"]) {
29 | var backgroundImageUrl = element.css("background-image");
30 | if (/^url\(.*\)$/.test(backgroundImageUrl)) {
31 | var path = backgroundImageUrl.substring(4, backgroundImageUrl.length - 1).replace(/\.(?!.*\.)/, settings["retina-suffix"] +".");
32 | preload(path, function(img) {
33 | element.css("background-image", "url(" + img.src + ")");
34 | if (element.css("background-size") == "auto auto") {
35 | element.css("background-size", (img.width / 2) + "px auto");
36 | }
37 | });
38 | }
39 | }
40 | });
41 | }
42 | };
43 | })(jQuery);
--------------------------------------------------------------------------------