jQueryを使用してDivの背景画像のサイズを取得する方法?

jQuery を使用して背景画像のサイズを決定する

はじめに

jQuery を使用して div の背景画像のサイズを取得するのは簡単そうに思えるかもしれませんしかし、課題も生じます。この記事では、このタスクに取り組み、プロセスを簡素化する拡張ソリューションを紹介します。

質問:

クエリ: 背景画像を取得するにはどうすればよいですか? jQueryを使用したdivのサイズ(幅と高さ)?

レスポンスA:

背景画像の寸法を取得するには、次のアプローチを使用します。

var image_url = $('#myDiv').css('background-image'),
    image;

// Remove url() or url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // Load image if needed
    $(image).load(function () {
        alert(image.width + 'x' + image.height);
    });

    image.src = image_url;
}

応答 B (2018 更新):

総合的に見て解決策:

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

使用法:

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

以上がjQueryを使用してDivの背景画像のサイズを取得する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。