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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
微信小程序收藏功能的实现代码
Jun 19 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
校园活动策划书范文
2014/01/10 职场文书
高二化学教学反思
2014/01/30 职场文书
应用数学专业求职信
2014/03/14 职场文书
捐赠仪式主持词
2014/03/19 职场文书
公司合作协议书范本
2014/04/18 职场文书
大学学生会辞职信
2015/05/13 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
MySQL优化及索引解析
2022/03/17 MySQL
python3 字符串str和bytes相互转换
2022/03/23 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript