The problem is simple. How do 开发者_Python百科I get a div's background image size (width and height) in jQuery. Is it even possible? I thought this would work:
jQuery('#myDiv').css('background-image').height();
The error message I get is that this is not a function.
One more version. No DOM manipulation needed, all characters in image file name supported.
UPDATE See an alternative version below.
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;
}
2018 solution
This answer is still receiving upvotes 5 years after. I thought I will share a more complete solution. This builds on top of original code and wraps it into a function. It uses jQuery Deferred Object, adds error handling and updates RegExp to match 3 possible cases: url()
, url("")
and url('')
. It also works on jQuery 1 to 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');
});
You'll have to do something like this:
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);
Due to the simplicity of the code, you cannot use parenthesis or quotation marks in the URLs of your background images. However, the code could be extended for greater support. I just wanted to convey the general idea.
Late answer, but you could also do this:
var img = new Image;
img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;
Then you don't have to manipulate the dom objects;
Another short way :
function bgSize($el, cb){
$('<img />')
.load(function(){ cb(this.width, this.height); })
.attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}
usage
bgSize($('#element-with-background'), function(width, height){
console.log('width : ' + width + ' height : ' + height);
});
https://jsfiddle.net/x4u2ndha/58/
I merged the answer from John together with the Plugin Style from Stryder. This plugin waits for the image to load:
$.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());
});
feel free to extend this code: https://gist.github.com/1276118
I made the same thing for the width :)
$.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;
};
Its been a while but I needed this solution as well, based on some suggested solutions here is my complete solution.
$.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;
};
Maybe few possibilities, I've tried to simplify as much and finaly this works for me
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) ;
}) ;
css('background-image') will return "url(.....)", you can't test the height of the image with that, since it's not a DOM object.
the same as above, but using regexp instead of 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();
});
The following is my adaptation:
$.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);
};
Usage:
$("#image").getBgDim(function(dim) {
console.log("Height: " + dim.height + " Width: " + dim.width);
});
Here is my rendition.
$.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);
};
Usage:
imgDiv.getBgImage(function (imgW, imgH) {
//use the imgW and imgH here!
});
Combined version of the above solutions
var width,
height;
$(image).load(function () {
width = image.width;
height = image.height;
});
image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "");
In the case your css had double quotes or browser manipulation do the following.
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);
}
In my particular case, I needed something which would work with background-image: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(...)
. I needed also a code that would be able to check several image from a specific class without copying the code for each image.
Maybe it could be useful for someone ! (I'm absolutely not an Jquery expert, since I started to code a month ago for my personal website.. So feel free to correct if needed !)
This work latest jQuery 3 and IE11 too. for backward JQuery compatibility, I think you can only replace .on("load", function()
by .load(function()
.
//will check all div with this class or id
var $image = $('#myDiv');
//will extract url only by splitting property on comas (takes care of comas on rgba(x, x, x, x))
var imageUrl = $image.css('background-image').split(",")[8].replace('url(','').replace(')','').replace('"','').replace('"','');
var img = new Image ;
img.src = imageUrl;
$(img).on("load", function() {
var image_width = img.width;
var image_height = img.height;
console.log(image_width + " x " + image_height) ;
}) ;
This is the most popular question regarding this topic, so I have to say that I don't understand why people try to overcomplicate things. Also I have to admit that I don't know how on earth one can call load()
JQuery function with just one parameter which is callback, since the method takes 3 parameters. As far as I am aware this would cause 'IndexOf()' is not defined
exception. I don't know if I am missing sth or the API has changed so much over the years. Anyway here is a working solution as of 2020:
jQuery.fn.extend({
backgroundImageSizeAsync: async function() {
const imageUrl = this.css("background-image").match(/^url\("?(.+?)"?\)$/)[1];
const image = new Image();
await $.Deferred(function (task) {
image.onload = () => task.resolve(image);
image.onerror = () => task.reject();
image.src = imageUrl;
}).promise();
return {
width: image.width,
height: image.height
}
},
});
call:
const size = await $(selector).backgroundImageSizeAsync();
精彩评论