jQuery实现图片加载完成后改变图片大小的方法


Posted in Javascript onMarch 29, 2016

本文实例讲述了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?400:w);
   obj.height(w>400?(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程序设计有所帮助。

Javascript 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 #Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
You might like
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
简单了解Python write writelines区别
2020/02/27 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
师范生自荐信
2013/10/27 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
家长给学校的建议书
2014/05/15 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
严以律己学习心得体会
2016/01/13 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL