图片延迟加载并等比缩放,一个简单的JQuery插件
使用方法:
$(".viewArea img").zoom({height:74,width:103});
(function($){
$.fn.zoom = function(settings){
//一些默认配置;
settings = $.extend({
height:0,
width:0,
loading:"http://www.dadachina.com/images/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插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- 实现一个简单的Vue插件
我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- JQuery 图片延迟加载并等比缩放插件
原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...
- .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器
目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...
随机推荐
- 格而知之3:Core Data的基本使用
最近准备做一个随手笔记类的app给自己用,考虑到从未使用过Core Data,就决定用Core Data来做数据存储.在网上参考了一些Core Data的资料后,用一天的时间写了这个demo,主要测试 ...
- Android系统匿名共享内存(Anonymous Shared Memory)C++调用接口分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6939890 在Android系统中,针对移动设 ...
- web推送
WEB消息推送框架 web-msg-sender是一款web长连接推送框架,采用PHPSocket.IO开发,基于WebSocket长连接通讯,如果浏览器不支持WebSocket则自动转用comet推 ...
- C++程序设计实践指导1.6分数运算改写要求实现
改写要求:重载>>和<<实现分数类对象的直接输入输出,重载+完成多个分数对象加法 #include <cstdlib> #include <iostream& ...
- sqlite在c++中的使用方法
1.需要下载的文件 http://pan.baidu.com/s/1c06NpzM 2.执行文件shell的编译 3.在c++中如何使用 #include <stdio.h> # ...
- php非递归无限级分类.
项目需要.递归无限级分类效率实在太低.理了半天思路写的. 分类越多效率越高. /** * 单次循环返回无限极分类嵌套 * @param array $data 操作的数组 * @param strin ...
- Windows Server 2008企业64位版防火墙添加端口的方法
原始地址:http://www.veryhuo.com/a/view/48280.html 什么是防火墙的入站规则和出站规则 简单的说 出站就是你访问外网 入站就是外网访问你 记得在两年前写过一篇教程 ...
- M端页面-绝对定位布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- PHP记录点击数方法
1.第一种方法: $id = $_GET['id']; //获取文章ID $sql = "UPDATE base SET hits = hits+1 WHERE id = '$id'&quo ...
- Python之路第十天,高级(2)-多线程,多进程,协程
线程 threading threading模块对象 描述 Thread 表示一个线程的执行对象 Lock 锁原语对象 RLock 可重入锁对象,使单线程可再次获得已经获得了的锁(递归锁定) Cond ...