jQueryは画像ロード後に画像サイズを変更するメソッドを実装しています_jquery

この記事の例では、画像のロード後に画像サイズを変更する jQuery メソッドについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

画像のサイズを変更するのは難しくありません。jQueryを使用してCSSを変更できます。ただし、前提として、画像が読み込まれているかどうかを判断する必要があります。主に jQuery の load イベントと onreadystatechange を介してそのステータスを判断します。

IE6 の場合は、onreadystatechange を使用して直接処理できます。IE7 では、タイマーを使用してイメージの Readystate ステータスを確認する必要があります。 FFやChromeの場合はloadイベントを直接利用して判定することができます。

以下は、この例で使用されている完全なコードです:

<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コンポーネントを使用して画像をクリックすると、フルサイズの画像が1つのレイヤーに表示されます。

さらに jQuery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「JQuery スイッチングのエフェクトとテクニックの概要」、「jQuery のドラッグ エフェクトとテクニックの概要」を参照してください。 ", "JQuery 拡張スキルまとめ", "jQuery 共通古典特撮まとめ", "jQuery アニメーションと特殊効果の使い方まとめ", " jQuery セレクターの使い方まとめ " および "jQuery の共通プラグインと使い方のまとめ "

この記事が jQuery プログラミングのすべての人に役立つことを願っています。