change - ¿Cómo obtengo el tamaño de la imagen de fondo en jQuery?

jquery animate opacity

Question

El problema es simple ¿Cómo obtengo el tamaño de imagen de fondo de un div (ancho y alto) en jQuery? ¿Es posible? Pensé que esto funcionaría:

jQuery(''#myDiv'').css(''background-image'').height();

El mensaje de error que recibo es que esto no es una función.

Answer 1

Aquí está mi versión.

$.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);
};

Uso:

imgDiv.getBgImage(function (imgW, imgH) {
//use the imgW and imgH here!
});

Answer 2

Combiné la respuesta de John junto con el estilo de complemento de Stryder. Este plugin espera que la imagen se cargue:

$.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());
});

no dude en extender este código: https://gist.github.com/1276118

Answer 3

En el caso de que su css tuviera comillas dobles o manipulación del navegador haga lo siguiente.

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);

Answer 4

Ha pasado un tiempo, pero también necesitaba esta solución, basada en algunas soluciones sugeridas, esta es mi solución completa.

$.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;
};

Answer 5

Hice lo mismo para el ancho :)

$.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;
};

Answer 6

La siguiente es mi adaptación:

$.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);
};

Uso:

$("#image").getBgDim(function(dim) {
console.log("Height: " + dim.height + " Width: " + dim.width);
});

Answer 7

Otra forma corta:

function bgSize($el, cb){
$(''<img />'')
.load(function(){ cb(this.width, this.height); })
.attr(''src'', $el.css(''background-image'').match(/^url/("?(.+?)"?/)$/)[1]);
}

uso

bgSize($(''#element-with-background''), function(width, height){
console.log(''width : '' + width + '' height : '' + height);
});

https://jsfiddle.net/x4u2ndha/58/

Answer 8

Respuesta tardía, pero también podría hacer esto:

var img = new Image;
img.src = $(''#myDiv'').css(''background-image'').replace(/url/(|/)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;

Entonces no tienes que manipular los objetos Dom;

Answer 9

Tal vez hay pocas posibilidades, he tratado de simplificar tanto y finalmente esto funciona para mí

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) ;
}) ;

Answer 10

Tendrás que hacer algo como esto:

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);

Debido a la simplicidad del código, no puede usar paréntesis o comillas en las URL de sus imágenes de fondo. Sin embargo, el código podría extenderse para un mayor soporte. Solo quería transmitir la idea general.

Answer 11

Una versión más. No se necesita manipulación DOM, todos los caracteres en el nombre del archivo de imagen son compatibles.

ACTUALIZACIÓN Vea una versión alternativa a continuación.

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;
}

Solución 2018

Esta respuesta todavía recibe votos favorables 5 años después. Pensé que compartiría una solución más completa. Esto se basa en el código original y lo envuelve en una función. Utiliza jQuery Objeto diferido, agrega manejo de errores y actualiza RegExp para que coincida con 3 posibles casos: url() , url("") y url('''') . También funciona en jQuery 1 a 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'');
});

Answer 12

Versión combinada de las soluciones anteriores

var width,
height;
$(image).load(function () {
width = image.width;
height = image.height;
});
image.src = $(''#id'').css(''background-image'').replace(/url/(|/)$/ig, "");

Answer 13

css (''background-image'') devolverá "url (.....)", no puede probar la altura de la imagen con eso, ya que no es un objeto DOM.

Answer 14

lo mismo que arriba, pero usando regexp en lugar de 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();
});