JAVASCRIPT   69

retina-replace.js

Guest on 6th August 2021 06:44:14 PM

  1. /* ============================================================
  2.  * retina-replace.js v1.0
  3.  * http://github.com/leonsmith/retina-replace-js
  4.  * ============================================================
  5.  * Author: Leon Smith
  6.  * Twitter: @nullUK
  7.  *
  8.  * Licensed under the Apache License, Version 2.0 (the "License");
  9.  * you may not use this file except in compliance with the License.
  10.  * You may obtain a copy of the License at
  11.  *
  12.  * http://www.apache.org/licenses/LICENSE-2.0
  13.  *
  14.  * Unless required by applicable law or agreed to in writing, software
  15.  * distributed under the License is distributed on an "AS IS" BASIS,
  16.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17.  * See the License for the specific language governing permissions and
  18.  * limitations under the License.
  19.  * ============================================================ */
  20.  (function($) {
  21.     "use strict";
  22.    
  23.     var retinaReplace = function(element, options) {
  24.  
  25.         this.options = options;
  26.         var $el = $(element);
  27.         var is_image = $el.is('img');
  28.         var normal_url = is_image ? $el.attr('src') : $el.backgroundImageUrl();
  29.         var retina_url = this.options.generateUrl($el, normal_url);
  30.  
  31.         $('<img/>').attr('src', retina_url).load(function() {
  32.  
  33.             if (is_image) {
  34.                 $el.attr('src', $(this).attr('src'));
  35.             } else {
  36.                 $el.backgroundImageUrl($(this).attr('src'));
  37.                 $el.backgroundSize($(this)[0].width, $(this)[0].height);
  38.             }
  39.  
  40.             $el.attr('data-retina', 'complete');
  41.         });
  42.     }
  43.  
  44.     retinaReplace.prototype = {
  45.         constructor: retinaReplace
  46.     }
  47.  
  48.     $.fn.retinaReplace = function(option) {
  49.         // Finish if we arn't a retina device
  50.         if (getDevicePixelRatio() <= 1) { return this; }
  51.  
  52.         return this.each(function() {
  53.             var $this = $(this);
  54.             var data = $this.data('retinaReplace');
  55.             var options = $.extend({}, $.fn.retinaReplace.defaults, $this.data(), typeof option == 'object' && option);
  56.             if (!data) { $this.data('retinaReplace', (data = new retinaReplace(this, options))); }
  57.             if (typeof option == 'string') { data[option](); }
  58.         });
  59.     }
  60.    
  61.     $.fn.retinaReplace.defaults = {
  62.         suffix: '_2x',
  63.         generateUrl: function(element, url) {
  64.             var dot_index = url.lastIndexOf('.');
  65.             var extension = url.substr(dot_index + 1);
  66.             var file = url.substr(0, dot_index);
  67.             return file + this.suffix + '.' + extension;
  68.         }
  69.     }
  70.  
  71.     $.fn.retinaReplace.Constructor = retinaReplace;
  72.  
  73.     // Helper Functions
  74.     var getDevicePixelRatio = function() {
  75.         if (window.devicePixelRatio === undefined) { return 1; }
  76.         return window.devicePixelRatio;
  77.     }
  78.  
  79.     $.fn.backgroundImageUrl = function(url) {
  80.         return url ? this.each(function () {
  81.             $(this).css("background-image", 'url("' + url + '")')
  82.         }) : $(this).css("background-image").replace(/url\(|\)|"|'/g, "");
  83.     }
  84.  
  85.     $.fn.backgroundSize = function(retinaWidth, retinaHeight) {
  86.         var sizeValue = Math.floor(retinaWidth/2) + 'px ' + Math.floor(retinaHeight/2) + 'px';
  87.         $(this).css("background-size", sizeValue);
  88.         $(this).css("-webkit-background-size", sizeValue);
  89.     }
  90.  
  91.     // Trigger replacement on elements that hav been marked up
  92.     $(function(){
  93.         $("[data-retina='true']").retinaReplace();
  94.     });
  95.  
  96. })(window.jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.