jQuery限制图片大小的方法


Posted in Javascript onMay 25, 2016

本文实例讲述了jQuery限制图片大小的方法。分享给大家供大家参考,具体如下:

最近在搞一个信息网站,文章内容中可以显示图片,所以就需要限制用户贴进去的图片的显示大小了。

在网上找到一段代码:

$(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());
      }
    }
  });
});

用这个方法了实现运行效果不稳定,有时间图片还没有加载完毕就会先执行了。

所以改用给所有需要限制大小的图片绑定load事件的方法来实现,这样保证了在每个图片加载完后再分别执行限制大小的代码。代码如下:

$(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());
      }
    }
  });
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
jQuery中设置form表单中action值的实现方法
May 25 #Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 #Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 #Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 #Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 #Javascript
BootStrap的Datepicker控件使用心得分享
May 25 #Javascript
jquery按回车键实现表单提交的简单实例
May 25 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python3实现磁盘空间监控
2018/06/21 Python
linux面试题参考答案(11)
2016/11/26 面试题
12岁生日感言
2014/01/21 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
十周年庆典策划方案
2014/06/03 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015年人事科工作总结
2015/04/28 职场文书
小型婚礼主持词
2015/06/30 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Nginx配置Https安全认证的实现
2021/05/26 Servers
javascript之Object.assign()的痛点分析
2022/03/03 Javascript