├── 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 | <script src="jquery.retina.js" type="text/javascript"></script>
15 | <script type="text/javascript">
16 | $(function() {
17 |   $(".retina").retina({"retina-background":true});
18 | });
19 | </script>


--------------------------------------------------------------------------------
/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 = $('<div>').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 = $("<div>").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);


--------------------------------------------------------------------------------