picture_javascript 기술의 실제 크기를 가져오는 JavaScript 코드 예

웹페이지의 이미지 크기는 모두 동일한 것 같습니다. 여러 장의 사진이 있는 기사 페이지에서 일반적으로 사진의 크기는 페이지의 너비와 같습니다. 이런 식으로 페이지가 직선 원통형처럼 보입니다. 매우 단조로운 느낌. 이런 상황이 발생하는 이유는 주로 오래된 브라우저의 한계 때문인 것 같습니다. 그러나 최신 브라우저(Firefox/Google/IE11)의 ​​인기로 인해 브라우저는 페이지 디자인에 대한 제한이 점점 줄어들고 웹 프로그래머의 상상력을 크게 활용할 수 있습니다.

예: 퀴즈: 모든 창의 [x]가 어디서 나오는지 아시나요? 이 기사에서는 많은 그림이 텍스트 너비의 한계를 초과하여 사람들에게 불균일함을 주는 동시에 큰 그림을 실제 크기로 표시하도록 허용하면 사람들에게 더 충격적인 느낌을 줍니다.

그러나 기술적으로는 텍스트의 최대 너비로 이미지를 쉽게 제한하여 텍스트의 너비를 누르는 대신 각 이미지가 자체 크기를 갖도록 할 수 있습니다. 서버 측에서 편집할 때 이미지의 원본 크기를 선언할 수 있습니다. 보다 유연한 방법은 페이지에 js 조각을 배치하여 이미지의 원래 크기를 동적으로 얻고 이미지의 표시 크기를 동적으로 변경하는 것입니다. 이는 텍스트 너비를 최대화하는 기존 방법과 호환될 뿐만 아니라 필요할 때 이미지가 원래 크기를 표시할 수도 있습니다.

JavaScript를 사용하여 브라우저 측에서 이미지의 원본 크기를 얻는 방법은 무엇입니까?

코드 복사 코드는 다음과 같습니다.

var img = $(“#img_id”); // img 요소 가져오기
var pic_real_width, pic_real_height;
$(“”) // CSS 문제를 방지하기 위해 이미지의 메모리 복사본을 만듭니다
.attr(“src”, $(img).attr(“src”))
.load(함수() {
pic_real_width = this.width; // 참고: $(this).width()는
pic_real_height = this.height; // 메모리 이미지에 사용됩니다.
});

Webkit 브라우저(Google Chrome 등)는 이미지 로드 이벤트 이후에만 높이 및 너비 값을 얻을 수 있습니다. 따라서 대기시간을 지연시키기 위해 타임아웃 기능을 사용할 수 없습니다. 가장 좋은 방법은 이미지의 onload 이벤트를 사용하는 것입니다.

CSS가 이미지 크기에 미치는 영향을 피하기 위해 위 코드는 계산을 위해 이미지를 메모리에 복사합니다.

귀하의 페이지가 구식 페이지인 경우 필요에 따라 페이지 하단에 이 코드를 삽입할 수 있습니다. 원본 페이지를 수정할 필요가 없습니다.