jQuery는 이미지가 로드된 후 이미지 크기를 변경하는 방법을 구현합니다_jquery

이 기사의 예에서는 이미지가 로드된 후 이미지 크기를 변경하는 jQuery 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이미지 크기를 변경하는 것은 어렵지 않습니다. jQuery를 사용하여 CSS를 변경할 수 있습니다. 하지만 전제는 이미지가 로드되었는지 여부를 결정하는 것입니다. 주로 jQuery의 로드 이벤트와 onreadystatechange를 통해 상태를 확인합니다.

IE6의 경우 onreadystatechange를 사용하여 직접 처리할 수 있습니다. IE7에서는 타이머를 사용하여 이미지의 Readystate 상태를 확인해야 합니다. FF와 Chrome의 경우 로드 이벤트를 직접 사용하여 판단할 수 있습니다.

다음은 예제에 사용된 전체 코드입니다.

<script type="text/javascript">
$(document).ready(function(){
  function changeSize(obj){
  //本函数用于在图片加载时对图片大小等进行设置
   w=obj.width();
   h=obj.height();
   t=obj.attr("title");
   src=obj.attr("src");
   obj.width(w>400&#63;400:w);
   obj.height(w>400&#63;(400/w)*h:h);
   obj.css("cursor","pointer");
   obj.click(function(){
    $("#picDlg").html("<img src="+src+" border=0/>").fadeIn(1000).dialog({
     width:"auto",
     height:"auto",
     title:t,
     modal:true,
     draggable:false,
     resizable:false
    })
   })
  }
  if($.browser.msie){
   //IE 6.0
   if($.browser.version==6.0){
    $(".bodyLeft img").each(function(ind,ele){
     // ele.onreadystatechange =function(){
      if(ele.readyState == "complete"||ele.readyState=="loaded"){
       changeSize($(this));
      }
     //}
    })
   }
   //IE 6.0以上
   else{
    $(".bodyLeft img").each(function(){
     tempTimer=window.setInterval(function(ind,ele){
      if(ele.readyState=="complete"){
       window.clearInterval(tempTimer);
       changeSize($(this));
      }
      else{
       return;
      }
     },200);
    })
   }
  }
  //FF,Chrome
  else{
   $(".bodyLeft img").each(function(ind,ele){
    alert(ele.complete);
    if(ele.complete==true){
     changeSize($(this));
    }
   })
  }
})
</script>

위 그림은 축소되어 기사에 표시될 수 있습니다. 동시에 jQuery Dialog UI 구성 요소를 사용하여 그림을 클릭하면 전체 크기의 그림이 하나의 레이어에 표시됩니다.

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 특별 주제를 확인할 수 있습니다. "JQuery 전환 효과 및 기술 요약", "jQuery 드래그 효과 및 기술 요약 ", "JQuery 확장 기술 요약", "jQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", " jquery 선택기 사용법 요약 " 및 "jQuery 공통 플러그인 및 사용법 요약 "

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.