2012-06-27 6 views
1

data-retina="true" 태그 또는 retina-resolution-image 또는 background-image 태그가있는 이미지 나 개체를 제공하는이 jQuery 스크립트가 있습니다.페이지에서 모든 이미지를 선택하는 방법은 무엇입니까?

그러나이 기능은 data-retina 태그가있는 이미지뿐만 아니라 모든 이미지에 적용되도록 스크립트에서 마지막 부분을 어떻게 제거합니까? 이 기능은 데이터 망막 태그뿐만 아니라 한 번, 모든 이미지에 적용 할 수 있도록 내가 스크립트에서 마지막 부분을 제거 어떻게

(function($) { 
    "use strict"; 

    var retinaReplace = function(element, options) { 

     this.options = options; 
     var $el = $(element); 
     var is_image = $el.is('img'); 
     var normal_url = is_image ? $el.attr('src') : $el.backgroundImageUrl(); 
     var retina_url = this.options.generateUrl($el, normal_url); 

     $('<img/>').attr('src', retina_url).load(function() { 

      if (is_image) { 
       $el.attr('src', $(this).attr('src')); 
      } else { 
       $el.backgroundImageUrl($(this).attr('src')); 
       $el.backgroundSize($(this)[0].width, $(this)[0].height); 
      } 

      $el.attr('data-retina', 'complete'); 
     }); 
    } 

    retinaReplace.prototype = { 
     constructor: retinaReplace 
    } 

    $.fn.retinaReplace = function(option) { 

     if (getDevicePixelRatio() <= 1) { return this; } 

     return this.each(function() { 
      var $this = $(this); 
      var data = $this.data('retinaReplace'); 
      var options = $.extend({}, $.fn.retinaReplace.defaults, $this.data(), typeof option == 'object' && option); 
      if (!data) { $this.data('retinaReplace', (data = new retinaReplace(this, options))); } 
      if (typeof option == 'string') { data[option](); } 
     }); 
    } 

    $.fn.retinaReplace.defaults = { 
     suffix: '-x2', 
     generateUrl: function(element, url) { 
      var dot_index = url.lastIndexOf('.'); 
      var extension = url.substr(dot_index + 1); 
      var file = url.substr(0, dot_index); 
      return file + this.suffix + '.' + extension; 
     } 
    } 

    $.fn.retinaReplace.Constructor = retinaReplace; 

    var getDevicePixelRatio = function() { 
     if (window.devicePixelRatio === undefined) { return 1; } 
     return window.devicePixelRatio; 
    } 

    $.fn.backgroundImageUrl = function(url) { 
     return url ? this.each(function() { 
      $(this).css("background-image", 'url("' + url + '")') 
     }) : $(this).css("background-image").replace(/url\(|\)|"|'/g, ""); 
    } 

    $.fn.backgroundSize = function(retinaWidth, retinaHeight) { 
     var sizeValue = Math.floor(retinaWidth/2) + 'px ' + Math.floor(retinaHeight/2) + 'px'; 
     $(this).css("background-size", sizeValue); 
     $(this).css("-webkit-background-size", sizeValue); 
    } 

    $(function(){ 
     $("[data-retina='true']").retinaReplace(); 
    }); 

})(window.jQuery); 
+0

내가, 당신은 또한 신청 모든 코드 ... – gdoron

답변

2

?

변경 :

$(function(){ 
    $("[data-retina='true']").retinaReplace(); 
}); 

사람 :

$(function(){ 
    $("img").retinaReplace(); 
}); 
+0

윌을 느낌을 작성하지 않은있어 배경 이미지 CSS가있는 객체 또는 순수한 이미지 ()? – user1484703

+0

$ ("img")는 모든 이미지 요소를 선택합니다. CSS 배경 이미지 요소는 여기에 포함되지 않습니다. –

+0

좋아요, 배경 이미지를 얻는 방법에 대한 아이디어가 있습니까? – user1484703

관련 문제