Как получить размер фонового изображения в jQuery?

Ответ 1

Вам нужно будет сделать что-то вроде этого:

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-адресах ваших фоновых изображений. Однако код может быть расширен для большей поддержки. Я просто хотел передать общую идею.

Ответ 2

Еще одна версия. Не требуется никаких манипуляций с 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;
}

Решение 2018 года

Этот ответ до сих пор получает голоса 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');
    });

Ответ 3

Поздний ответ, но вы также можете это сделать:

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

Тогда вам не нужно манипулировать объектами dom;

Ответ 4

Еще один короткий путь:

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

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

Ответ 5

Я объединил ответ от Джона вместе со стилем плагина из 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

Ответ 6

Это было какое-то время, но мне также понадобилось это решение, основанное на некоторых предлагаемых решениях, это мое полное решение.

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

Ответ 7

Я сделал то же самое для ширины:)

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

Ответ 8

css ('background-image') вернет "url (.....)", вы не можете проверить высоту изображения с этим, так как это не объект DOM.

Ответ 9

то же, что и выше, но с использованием 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();
});

Ответ 10

Ниже приводится моя адаптация:

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

Ответ 11

Возможно, немного возможностей, я пытался упростить, и в конечном итоге это работает для меня

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

Ответ 12

Вот мое исполнение.

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

Ответ 13

Комбинированная версия вышеупомянутых решений

var width,
    height;

$(image).load(function () {
    width  = image.width;
    height = image.height;
});

image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "");

Ответ 14

В случае, если ваш 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);

Ответ 15

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