├── 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); --------------------------------------------------------------------------------