JQuery 图片延迟加载并等比缩放插件_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);

效果是这样的:

时间: 2024-09-24 21:44:08

JQuery 图片延迟加载并等比缩放插件_jquery的相关文章

jquery图片延迟加载 前端开发技能必备系列_jquery

目前,主要的购物网站都采用了这种加载方式.今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下. 先介绍一下图片延迟加载原理.我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活.不露面. 复制代码 代码如下: <img src="images/placeholder.png" lazy-src="images/real

jquery 图片预加载 自动等比例缩放插件_jquery

复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

jQuery实现鼠标滚动图片延迟加载效果附源码下载_jquery

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示       源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta chars

jquery图片延迟加载效果实现方法

首先是加载空字符串的问题,如果给img的src设为空字符串的话,可能会得到意料之外的结果.例如在 http://xxx/test.htm 里面的 <img src=""> 会发生以下情况:ie 会产生相对地址的请求,即:http://xxx/Safari/Chrome 会产生当前页面地址的请求,即:http://xxx/test.htmOpera/Firefox 不会产生请求 实例  代码如下 复制代码 <img src="grey.gif" or

使用jquery.qrcode.js生成二维码插件_jquery

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

jquery制作多功能轮播图插件_jquery

这是一款多功能幻灯片插件,支持多种配置,css样式是扒的网上的,里面的代码原创,轻喷~ ;(function($) { "use strict"; var methods = { o : { next: "#cycle-next", prev: "#cycle-prev", pager : "#cycle-nav", slider : "#beauty-slider", timeLine : "#

jQuery图片轮播实现并封装(一)_jquery

利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可. demo:https://github.com/zsqosos/shopweb 具体代码如下: HTML结构: <div class="banner" id="J_bg_ban"> <ul> <li><a href="#"><img src="banner_04.jpg

jquery实现的代替传统checkbox样式插件_jquery

本文实例讲述了jquery实现的代替传统checkbox样式插件.分享给大家供大家参考.具体如下: 效果图如下: 具体代码如下: (function($){ $.fn.tzCheckbox = function(options){ // Default On / Off labels: options = $.extend({ labels : ['ON','OFF'] },options); return this.each(function(){ var originalCheckBox =

jquery图片倾斜层叠切换特效代码分享_jquery

本文实例讲述了jquery图片倾斜层叠切换特效代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery.roundabout.js制作的CSS3图片倾斜层叠切换效果代码,很有层次感还可以左右切换,一款很清新的代码实例. 运行效果图:                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 我们需要以下代码把样式和特效导入: <link rel="style