이미지 표시 크기를 동적으로 변경하는 jQuery의 구현 아이디어 및 코드(수정 버전)

이미지 표시 크기를 동적으로 변경하는 jQuery의 구현 아이디어 및 코드(수정 버전)_jquery

WBOY

풀어 주다： 2016-05-16 17:07:19

원래의

877명이 탐색했습니다.

배경에서 전송되는 다양한 크기의 여러 장의 사진을 표시하려면 사진 크기의 일관성과 비율의 조정을 보장하기 위해 사진 표시 크기를 동적으로 변경해야 합니다. 검색을 통해 인터넷에서 이 기능을 구현한 jQuery 코드를 아래와 같이 찾을 수 있다. 이 코드는 이미지의 크기를 특정 범위 내에서 유지할 수 있습니다. 이미지의 원래 크기가 max* 값보다 크면 표시되는 이미지의 너비가 동일해집니다.

원본 코드:

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

$(document).ready(function( ) {
 $('.post img').each(function() {
 var maxWidth = 100; // 최대 이미지 너비 
 var maxHeight = 100; // 최대 이미지 높이 
 var ratio = 0 ; // 크기 조정 비율
 var width = $(this).width(); // 그림의 실제 너비
 var height = $(this).height(); 

 // 이미지가 매우 넓은지 확인
 if(width > maxWidth){
 ratio = maxWidth / width // 크기 조정 비율 계산
 $(this).css ("width", maxWidth); // 
의 높이를 설정합니다. }

 // 그림이 매우 높은지 확인합니다.
 if(height > maxHeight){
 ratio = maxHeight / height; // 크기 조정 비율 계산 
 $(this ) .css ("height", maxheight) // 실제 표시 높이 설정 
 width = width * ratio; 계산 비율의 높이 
 $ (this) .css ("width" ("width" width * ratio); // 크기 조정 후 높이 설정 
 }
 });
 }) ;

JS 코드에서도 이 작성 방법을 사용합니다. 그러나 다른 브라우저에서 효과를 테스트한 결과 이 작성 방법은 Chrome 브라우저(크롬 버전 번호는 10.0.648.204)에 적용할 수 없으며 이미지가 원래 크기로 표시되는 버그가 발생하는 것으로 나타났습니다. 나중에 $('.post img').each() 코드를 $(window).load() 메소드로 래핑하여 Chrome 브라우저에서 잘못된 표시 문제를 해결했습니다. 그렇다면 크롬 브라우저에서는 왜 버그가 발생하며, $(document).ready와 $(window).load의 차이점은 무엇인가요?

이미지 리소스가 아직 로드되지 않은 경우에도 HTML 문서가 로드되고 DOM이 준비되면 문서 준비 이벤트가 실행되기 시작하는 것으로 나타났습니다. 창 로드 이벤트는 프레임, 개체, 이미지를 포함한 전체 페이지가 로드된 후 약간 나중에 실행됩니다. 이러한 차이로 인해 Chrome 브라우저가 이미지 처리를 위해 $(window).load() 메서드를 사용하지 않는 경우 이미지를 로드하고 이미지를 동적으로 변경하는 js 코드의 실행 순서가 불확실하다는 것을 분석할 수 있습니다.

위 코드를 마이페이지에 넣으면 이미지의 높이를 가져올 때 너비 메서드가 제공되지 않는다는 오류가 보고됩니다

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

var width = $(this).width (); // 이미지의 실제 너비

var height = $(this).height() // 이미지의 실제 높이

그래서 수정한 코드는 다음과 같습니다.

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

jQuery(window).load(function () {
            jQuery("div.product_info img").each(function () {
               DrawImage(this, 680, 1000);
> 🎜>            만약 ( image.width > 0 && image.height > 0) {
               if (image.width / image.height >= FitWidth / FitHeight) {
                 if (image.width > FitWidth) {
>                      ImgD.width = image.width;
                      ImgD.height = image.height;
                   }
              } else {
                  if (image.height > FitHeight)                      ImgD.height = FitHeight;
                       ImgD.width = (image.width * FitHeight) / image.height;
                  } else {
                     ImgD.width = image.width;
                     ImgD.height = image.height;
                   }
               }
            }
        }