2012-06-27 2 views
1

У меня есть этот jQuery-скрипт, который дает любое изображение или объект с тегом data-retina="true" a retina-resolution-image или background-image.Как выбрать все изображения на странице?

Но как удалить последнюю часть из сценария, чтобы эта функция применима на каждом изображении, а не только на теге 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

как удалить последнюю часть из сценария, так что эта функция будет применяться на каждом изображении, а не только один раз с данными-Retina-тег?

Изменение:

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

To:

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

Уилла, который также применять для объекты с фоном CSS-изображения или просто чистые изображения ()? – user1484703

+0

$ ("img") выбирает все элементы изображения. Это не включает элементы css background-image. –

+0

ОК, любая идея, как получить фоновые изображения? – user1484703

Смежные вопросы