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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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操作xml代码
2010/06/17 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php实现记事本案例
2020/10/20 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
JS实现吸顶特效
2020/01/08 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python统计字符的个数代码实例
2020/02/07 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
商场经理竞聘演讲稿
2014/01/01 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
党员作风建设自查报告
2014/10/23 职场文书
会议通知
2015/04/15 职场文书
公司承诺书格式范文
2015/04/28 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android