下面是一段图片预加载代码实例,现在很多图片站都有大量的应用,当然它的好处是很明显的,下面是一段来自于网络上的代码实例和大家分享一下,希望能够给需要的朋友带来一定的帮助。
代码如下:
   [ jQuery ] 运行代码    下载代码
<script>
/* 
* Image preload and auto zoom 
* scaling 是否等比例自动缩放 
* width 图片最大高 
* height 图片最大宽 
* loadpic 加载中的图片路径 
* example $("*").LoadImage(true,w,h); 
*/
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
  if(loadpic==null)loadpic="../images/loading.gif"; 
    return this.each(function(){ 
      var t=$(this); 
      var src=$(this).attr("src") 
      var img=new Image(); 
      //alert("Loading...") 
      img.src=src; 
      //自动缩放图片 
      var autoScaling=function(){ 
        if(scaling){ 
          if(img.width>0 && img.height>0){ 
            if(img.width/img.height>=width/height){ 
              if(img.width>width){ 
                t.width(width); 
                t.height((img.height*width)/img.width); 
                t.css("margin-top", (height-t.height())/2); 
              }
              else{ 
                t.width(img.width); 
                t.height(img.height); 
                t.css("margin-top", (height-t.height())/2); 
              } 
            } 
            else{ 
              if(img.height>height){ 
                t.height(height); 
                t.width((img.width*height)/img.height); 
                t.css("margin-top", (height-t.height())/2); 
              }
             else{ 
                t.width(img.width); 
                t.height(img.height); 
                t.css("margin-top", (height-t.height())/2); 
              } 
            } 
          } 
        } 
      } 
      //处理ff下会自动读取缓存图片 
      if(img.complete){ 
        autoScaling(); 
        return; 
      } 
      $(this).attr("src",""); 
      var loading=$("<img alt=\\"加载中...\\" title=\\"图片加载中...\\" src=\\""+loadpic+"\\" />"); 
      t.hide(); 
      t.after(loading); 
      $(img).load(function(){ 
      autoScaling(); 
      loading.remove(); 
      t.attr("src",this.src); 
      t.show(); 
    }); 
  }); 
}
</script>

代码描述:jQuery图片预加载。jQuery图片预加载源码实例



133 177



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到