JS技术

jq图片预加载+自动等比例缩放插件

字号+ 作者: 来源:chinaz    2014-11-17 20:00 我要评论( )

///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比

  ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来

  可对图片进行是否自动缩放功能

  此插件使用时可让页面先加载,而图片后加载的方式,

  解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题

  ///参数设置:

  scaling 是否等比例自动缩放

  width 图片最大高

  height 图片最大宽

  loadpic 加载中的图片路径

  */

  jQuery.fn.LoadImage=function(scaling,width,height,loadpic){

  if(loadpic==null)loadpic="load3.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);

  }else{

  t.width(img.width);

  t.height(img.height);

  }

  }

  else{

  if(img.height>height){

  t.height(height);

  t.width((img.width*height)/img.height);

  }else{

  t.width(img.width);

  t.height(img.height);

  }

  }

  }

  }

  }

  //处理ff下会自动读取缓存图片

  if(img.complete){

  //alert("getToCache!");

  autoScaling();

  return;

  }

  $(this).attr("src","");

  var loading=$("\"加载中\"");

  t.hide();

  t.after(loading);

  $(img).load(function(){

  autoScaling();

  loading.remove();

  t.attr("src",this.src);

  t.show();

  //alert("finally!")

  });

  });

  }

  使用说明:

  $("div img").LoadImage(true,120,90);

  效果如下:

  

\

  效果演示

    演示代码下载

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • myeclipse2014下卸载,安装maven插件。 - 高尚的专栏 - 博客频道 - CSDN.NET 高尚的专栏

    myeclipse2014下卸载,安装maven插件。 - 高尚的专栏 - 博客频道 - C

    2015-12-15 09:02

  • 强制弹出广告页面+自动最小化代码_javascript教程教程

    强制弹出广告页面+自动最小化代码_javascript教程教程

    2015-10-08 13:07

  • 图片自动缩小的js代码,用以防止图片撑破页面_javascript教程教程

    图片自动缩小的js代码,用以防止图片撑破页面_javascript教程教程

    2015-10-08 12:07

  • 网页表单自动填写技术(gmail为例)_javascript教程教程

    网页表单自动填写技术(gmail为例)_javascript教程教程

    2015-10-07 16:14

网友点评
/