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 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
再谈JavaScript线程
Jul 10 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
jquery实现上传图片功能
Jun 29 jQuery
javascript实现智能手环时间显示
Sep 18 Javascript
微信小程序实现购物车小功能
Dec 30 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 cache类代码(php数据缓存类)
2010/04/15 PHP
PDO::prepare讲解
2019/01/29 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python批量解压zip文件的方法
2019/08/20 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
如何写一个自定义标签
2012/12/28 面试题
教师推荐信范文
2013/11/24 职场文书
元旦联欢会主持词
2014/03/26 职场文书
社区服务标语
2014/07/01 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
如何写观后感
2015/06/19 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB