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 중국어 웹사이트의 기타 관련 기사를 참조하세요!