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

网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery实现图片加载完成后改变图片大小的方法,结合实例形式分析了jQuery图片样式与页面元素属性动态操作的相关技巧,需要的朋友可以参考下

本文实例讲述了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 == "plete"||ele.readyState=="loaded"){
       changeSize($(this));
      }
     / 

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by