WebKit 브라우저에서 이미지 크기를 안정적으로 가져오는 방법은 무엇입니까?

Webkit 브라우저에서 이미지 크기 결정

JavaScript 플러그인을 개발할 때 이미지의 실제 너비와 높이를 얻는 것이 중요합니다. 기존 방법은 Firefox, IE 및 Opera에서 작동하지만 반환 값이 0인 Safari 및 Chrome에서는 실패합니다.

WebKit의 고유한 이미지 로딩 동작

달리 다른 브라우저에서는 Webkit이 이미지가 로드된 후에만 이미지의 높이 및 너비 속성을 설정합니다. 이 동작에는 실제 이미지 크기를 검색하기 위한 다른 접근 방식이 필요합니다.

利用图文加载事件

권장되는 해결 방법은 이미지의 onload 이벤트를 사용하는 것입니다. 다음은 문제를 해결하는 수정된 코드 조각입니다.

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

CSS 효과 방지

CSS 효과가 크기에 영향을 주지 않도록 코드는 내부를 생성합니다. 이미지의 메모리 사본. 이 기술을 사용하면 검색된 값이 실제 이미지 크기를 정확하게 반영할 수 있습니다.

대체 접근 방식: HTML5 속성

HTML5는 naturalHeight 및 naturalWidth 속성을 제공하며 이 속성도 사용할 수 있습니다. 실제 이미지 크기를 검색합니다. 그러나 이러한 속성에 대한 지원은 브라우저마다 다릅니다.

위 내용은 WebKit 브라우저에서 이미지 크기를 안정적으로 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!