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);
내가, 당신은 또한 신청 모든 코드 ... – gdoron