jquery가 Google Chrome_jquery에서 이미지 크기를 얻을 수 없는 문제를 해결하는 방법-JS 튜토리얼-php.cn

jquery가 Google Chrome_jquery에서 이미지 크기를 얻을 수 없는 문제를 해결하는 방법

WBOY

풀어 주다： 2016-05-16 15:39:51

원래의

1193명이 탐색했습니다.

코드는 다음과 같습니다.

$(document).ready(function(){ 
 var img_h=$img.height();  
 var img_w=$img.width();  
})

로그인 후 복사

위 코드는 IE와 Firefox에서는 문제가 없지만 Google에서는 문제가 발생할 수 있습니다. 사이즈가 품절되는 이유는 이미지가 로드되지 않았기 때문입니다.

수정 방법은 다음과 같습니다.

$(document).ready(function(){ 
 $img.load(function(){  
  var img_h=$img.height();  
  var img_w=$img.width();  
 }) 
})

로그인 후 복사

아직 시간이 있으니 공유해드리겠습니다 jQuery를 사용하여 이미지 표시 크기를 동적으로 변경하는 방법은 다음과 같습니다.

배경에서 전송되는 다양한 크기의 여러 장의 사진을 표시하려면 사진 크기의 일관성과 비율의 조정을 보장하기 위해 사진 표시 크기를 동적으로 변경해야 합니다. 검색을 통해 인터넷에서 이 기능을 구현한 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); // 设定实际显示宽度
     height = height * ratio;  // 计算等比例缩放后的高度 
     $(this).css("height", height); // 设定等比例缩放后的高度
   }
   // 检查图片是否超高
   if(height > maxHeight){
     ratio = maxHeight / height; // 计算缩放比例
     $(this).css("height", maxHeight);  // 设定实际显示高度
     width = width * ratio;  // 计算等比例缩放后的高度
     $(this).css("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);
      });
    });
    function DrawImage(ImgD, FitWidth, FitHeight) {
      var image = new Image();
      image.src = ImgD.src;
      if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
          if (image.width > FitWidth) {
            ImgD.width = FitWidth;
            ImgD.height = (image.height * FitWidth) / image.width;
          } else {
            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;
          }
        }
      }
    }

로그인 후 복사

위 내용은 Google Chrome에서 jquery가 이미지 크기를 얻을 수 없는 문제를 해결하는 방법과 jQuery가 이미지의 표시 크기를 동적으로 변경하는 방법을 여러분께 공유한 내용입니다. 마음에 드셨으면 좋겠습니다. 또한 친구들이 이 사이트에 계속 관심을 갖기를 바랍니다. 감사합니다.