Проблема проста. Как получить размер фонового изображения div (ширина и высота) в jQuery. Возможно ли это? Я думал, что это сработает:
jQuery('#myDiv').css('background-image').height();
Сообщение об ошибке, которое я получаю, это то, что это не функция.
Вам нужно будет сделать что-то вроде этого:
var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
var height = $(this).height();
alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
Из-за простоты кода вы не можете использовать скобки или кавычки в URL-адресах ваших фоновых изображений. Однако код может быть расширен для большей поддержки. Я просто хотел передать общую идею.
Еще одна версия. Не требуется никаких манипуляций с DOM, поддерживаются все символы в имени файла изображения.
ОБНОВЛЕНИЕ См. альтернативную версию ниже.
var image_url = $('#something').css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
alert(image.width + 'x' + image.height);
});
image.src = image_url;
}
Этот ответ до сих пор получает голоса 5 лет спустя. Я думал, что поделюсь более полным решением. Это основано на оригинальном коде и превращает его в функцию. Он использует jQuery Deferred Object, добавляет обработку ошибок и обновляет RegExp для соответствия 3 возможным случаям: url(), url("") и url(''). Он также работает на jQuery с 1 по 3.
var getBackgroundImageSize = function(el) {
var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);
var dfd = new $.Deferred();
if (imageUrl) {
var image = new Image();
image.onload = dfd.resolve;
image.onerror = dfd.reject;
image.src = imageUrl[1];
} else {
dfd.reject();
}
return dfd.then(function() {
return { width: this.width, height: this.height };
});
};
//
// Usage
//
getBackgroundImageSize(jQuery('#mydiv'))
.then(function(size) {
console.log('Image size is', size.width, size.height);
})
.fail(function() {
console.log('Could not get size because could not load image');
});
Поздний ответ, но вы также можете это сделать:
var img = new Image;
img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;
Тогда вам не нужно манипулировать объектами dom;
Еще один короткий путь:
function bgSize($el, cb){
$('<img />')
.load(function(){ cb(this.width, this.height); })
.attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}
Использование
bgSize($('#element-with-background'), function(width, height){
console.log('width : ' + width + ' height : ' + height);
});
Я объединил ответ от Джона вместе со стилем плагина из Stryder. Этот плагин ожидает загрузки изображения:
$.fn.getBgImage = function(callback) {
var height = 0;
var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
var tempImg = $('<img />');
tempImg.hide(); //hide image
tempImg.bind('load', callback);
$('body').append(tempImg); // add to DOM before </body>
tempImg.attr('src', path);
$('#tempImg').remove(); //remove from DOM
};
// usage
$("#background").getBgImage(function() {
console.log($(this).height());
});
не стесняйтесь расширять этот код: https://gist.github.com/1276118
Это было какое-то время, но мне также понадобилось это решение, основанное на некоторых предлагаемых решениях, это мое полное решение.
$.fn.getBgHeight = function () {
var height = 0;
var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
var tempImg = '<img id="tempImg" src="' + path + '"/>';
$('body').append(tempImg); // add to DOM before </body>
$('#tempImg').hide(); //hide image
height = $('#tempImg').height(); //get height
$('#tempImg').remove(); //remove from DOM
return height;
};
Я сделал то же самое для ширины:)
$.fn.getBgWidth = function () {
var width = 0;
var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
var tempImg = '<img id="tempImg" src="' + path + '"/>';
$('body').append(tempImg); // add to DOM before </body>
$('#tempImg').hide(); //hide image
width = $('#tempImg').width(); //get width
$('#tempImg').remove(); //remove from DOM
return width;
};
css ('background-image') вернет "url (.....)", вы не можете проверить высоту изображения с этим, так как это не объект DOM.
то же, что и выше, но с использованием regexp вместо replace()
$.fn.extend({
/**
* gets background image
* @param callback function (inside - this = HTMLElement image)
*/
get_bg_image: function(callback) {
if (typeof callback != 'function') return;
var regexp = /url\((.+)\)/i,
regexp2 = /["']/gi,
res = regexp.exec($(this).css('background-image')),
img_src = res[1].replace(regexp2, ''),
$tempImg = $('<img />');
$tempImg.hide();
$tempImg.bind('load', function(e) {
callback.call(this, e);
$tempImg.remove();
});
$('body').append($tempImg);
$tempImg.attr('src', img_src);
}
});
// usage
$('div').get_bg_image(function() {
var bg_img_width = $(this).width();
});
Ниже приводится моя адаптация:
$.fn.getBgDim = function (callback) {
var width = 0,
height = 0,
path = $(this).css("background-image").replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""),
tmp = $("<img />");
tmp.hide();
tmp.bind("load", function() {
width = $(this).width();
height = $(this).height();
callback({"width": width, "height": height});
$(this).remove();
});
$("body").append(tmp);
tmp.attr('src', path);
};
Использование:
$("#image").getBgDim(function(dim) {
console.log("Height: " + dim.height + " Width: " + dim.width);
});
Возможно, немного возможностей, я пытался упростить, и в конечном итоге это работает для меня
var img = new Image ;
img.src = $('#dom').css('background-image').replace("url(", "").replace(")", "").replace("\"", "").replace("\"", "");
$(img).load(function() {
var bgImgWidth = img.width;
var bgImgHeight = img.height;
console.log("w::"+bgImgWidth+",h::"+bgImgHeight) ;
}) ;
Вот мое исполнение.
$.fn.getBgImage = function (callback) {
var path = $(this).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
var tempImg = $('<img />').hide().bind('load', function () {
callback($(this).width(), $(this).height());
$(this).remove();
}).appendTo('body').attr('src', path);
};
Использование:
imgDiv.getBgImage(function (imgW, imgH) {
//use the imgW and imgH here!
});
Комбинированная версия вышеупомянутых решений
var width,
height;
$(image).load(function () {
width = image.width;
height = image.height;
});
image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "");
В случае, если ваш css имел двойные кавычки или манипуляции с браузером, выполните следующие действия.
var url = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace('"','').replace('"','');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
var height = $(this).height();
alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
// The above all solutions may work in all browsers except IE11 so below is the modified solution for IE11 browser
//The height calculated for IE11 wasn't correct as per above code
$.fn.getBgImage = function(callback) {
if (typeof callback != 'function') return;
var regexp = /url\((.+)\)/i,
regexp2 = /["']/gi,
res = regexp.exec($(this).css('background-image')),
img_src = res[1].replace(regexp2, ''),
$tempImg = $('<img />');
$tempImg.hide();
$tempImg.bind('load', function(e) {
callback.call(this, e);
$tempImg.remove();
});
$('body').css({ 'width': 100 + '%' });
$tempImg.css({ 'width': 100 + '%' });
$('body').append($tempImg);
$tempImg.attr('src', img_src);
}