JQuery 图片延迟加载并等比缩放插件

 更新时间:2009年11月09日 00:50:43   作者:  
图片延迟加载并等比缩放,一个简单的JQuery插件。 需要的朋友可以参考下。
最近在学习JS的OOP所以写了这么个东西
使用方法:
$(".viewArea img").zoom({height:74,width:103});
效果演示:
http://demo.jb51.net/html/jquery_img/jquery_img.htm
代码:
复制代码 代码如下:

(function($){
$.fn.zoom = function(settings){
//一些默认配置;
settings = $.extend({
height:0,
width:0,
loading:"lightbox-ico-loading.gif"
},settings);
var images = this;
$(images).hide();
var loadding = new Image();
loadding.className="loadding"
loadding.src = settings.loading;
$(images).after(loadding);
//预加载
var preLoad = function($this){
var img = new Image();
img.src = $this.src;
if (img.complete) {
processImg.call($this);
return;
}
//$this.src = loadding.src;//会导致获取错误的尺寸
img.onload = function(){
//$this.src = this.src; //会导致获取错误的尺寸
processImg.call($this);
img.onload=function(){};
}
}
//计算图片尺寸;
function processImg(){
//if(settings.height===0||settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width - settings.width;
if(m>n)
this.height = this.height>settings.height ? settings.height :
this.height;
else
this.width = this.width >settings.width ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show();
}
return $(images).each(function(){
preLoad(this);
});
}
})(jQuery);

效果是这样的:

相关文章

  • jquery实现弹出层效果实例

    jquery实现弹出层效果实例

    这篇文章主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下
    2015-05-05
  • 简单实现jQuery上传图片显示预览功能

    简单实现jQuery上传图片显示预览功能

    这篇文章主要教大家如何简单实现jQuery上传图片显示预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 浅谈被jQuery抛弃的函数及替代函数

    浅谈被jQuery抛弃的函数及替代函数

    这篇文章主要介绍了被jQuery抛弃的几个函数及其替代函数,我们在做项目开发的时候一定要注意,分享给大家参考下。
    2015-05-05
  • jQuery Mobile的loading对话框显示/隐藏方法分享

    jQuery Mobile的loading对话框显示/隐藏方法分享

    jQuery Mobile提供两个方法,使得开发者在编写JavaScript业务编辑时,可以随意的控制loading提示框
    2013-11-11
  • jQuery 循环遍历改变a标签的href(实例讲解)

    jQuery 循环遍历改变a标签的href(实例讲解)

    下面小编就为大家带来一篇jQuery 循环遍历改变a标签的href(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jquery Banner轮播选项卡

    jquery Banner轮播选项卡

    这篇文章主要为大家详细介绍了jquery Banner轮播选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery实现简单的DIV拖动效果

    jQuery实现简单的DIV拖动效果

    这篇文章主要介绍了jQuery实现简单的DIV拖动效果,涉及jQuery针对鼠标事件的响应及页面元素的动态操作技巧,需要的朋友可以参考下
    2016-02-02
  • jquery的ajax如何使用ajaxSetup做全局请求拦截

    jquery的ajax如何使用ajaxSetup做全局请求拦截

    在Web开发中,Ajax是一种常用的前后端数据交互技术,由于业务需求的复杂性和安全性的考虑,我们可能需要对Ajax请求进行全局拦截和处理,以便统一处理一些共性问题,如权限验证、错误处理等,本项目方案将介绍如何使用jQuery的Ajax实现全局请求拦截
    2023-11-11
  • 超级好用的jQuery圆角插件 Corner速成

    超级好用的jQuery圆角插件 Corner速成

    虽然圆角页面很好看,但一直以来都不太好实现,一方面是没有CSS3,二是都得通过美工切图切出来角。但这些麻烦事即将过去,就是因为它:jQuery Corner的出现!
    2014-08-08
  • jQuery如何获取动态添加的元素

    jQuery如何获取动态添加的元素

    这篇文章主要介绍了jQuery如何获取动态添加的元素的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论