這篇文章主要介紹了jQuery限制圖片大小的方法,對(duì)比分析了常見的jQuery限制圖片操作方法及改進(jìn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery限制圖片大小的方法。分享給大家供大家參考，具體如下：

最近在搞一個(gè)信息網(wǎng)站，文章內(nèi)容中可以顯示圖片，所以就需要限制用戶貼進(jìn)去的圖片的顯示大小了。

代碼如下:

$(document).ready(function(){

  $("#viewnews_body img").each(function(){

    var width = 620;

    var height = 600;

    var image = $(this);

    if (image.width() > image.height()){

      if(image.width()>width){

        image.width(width);

        image.height(width/image.width()*image.height());

      }

    }else{

      if(image.height()>height){

        image.height(height);

        image.width(height/image.height()*image.width());

      }

    }

  });

});

用這個(gè)方法了實(shí)現(xiàn)運(yùn)行效果不穩(wěn)定，有時(shí)間圖片還沒有加載完畢就會(huì)先執(zhí)行了。

所以改用給所有需要限制大小的圖片綁定load事件的方法來實(shí)現(xiàn)，這樣保證了在每個(gè)圖片加載完后再分別執(zhí)行限制大小的代碼。

代碼如下:

$(document).ready(function(){

  $("#viewnews_body img").bind("load",function(){

    var width = 620;

    var height = 600;

    var image = $(this);

    if (image.width() > image.height()){

      if(image.width()>width){

        image.width(width);

        image.height(width/image.width()*image.height());

      }

    }else{

      if(image.height()>height){

        image.height(height);

        image.width(height/image.height()*image.width());

      }

    }

  });

});

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。