图片延迟加载jquery插件imgLazyLoad(三)
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径
/*
**************图片预加载插件******************
///作者：没剑(2008-06-23)
///http://regedit.cnblogs.com ///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来
可对图片进行是否自动缩放功能
此插件使用时可让页面先加载，而图片后加载的方式，
解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题
///参数设置：
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=$("<div class=\"load\"></div>"); t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
//alert("finally!")
}); });
}
JS
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友没剑原创图片预加载jquery插件</title>
<meta name="Keywords" content="" />
<meta name="description" content='' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')
</script>
<script type="text/javascript" src="js/jquery.LoadImage.js"></script>
<script type="text/javascript">
$(function(){
$(".test").LoadImage(0,160,160,"loading.gif");
});
</script>
<style>
.load{text-align:center;width:99%;height:99%;background:url("loading.gif") center no-repeat}
.pic{text-align:center;float:left;width:24%;height:200px;}
.pic-title{clear:both;height:30px;}
.pic img{width:160px;height:160px;}
</style>
</head> <body> <div class="pic-list"> <div class=pic>
<img alt="" title="" src="http://i3.3conline.com/images/piclib/201004/27/batch/1/58761/127232496854943v5k3uijj.jpg*" class="test"/>
<div class=pic-title>图片描述</div>
</div>
<div class=pic>
<img alt="" title="" src="http://i3.3conline.com/images/piclib/201004/27/batch/1/58761/127232496854943v5k3uijj.jpg*" class="test"/>
<div class=pic-title>图片描述</div>
</div> </div>
</body>
</html>
HTML
图片延迟加载jquery插件imgLazyLoad(三)的更多相关文章
- 图片延迟加载jquery插件imgLazyLoading
实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- 延迟加载图片的 jQuery 插件：Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 延迟加载图片的 jQuery 插件——lazyload.js
lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
随机推荐
- Bitmap二次采样(处理图片过大的问题)
private Bitmap createImageThumbnail(String filePath, int newHeight, int newWidth) { BitmapFactory.Op ...
- Servlet、Filter和Listener
Java Servlet是与平台无关的服务器端组件,运行于Servlet容器中(如Tomcat),Servlet容器负责Servlet和客户端的通信以及调用Servlet的方法,Servlet和客户端 ...
- Redis哈希-hash
Redis的hash类型数据存储极为重要 hset K V 赋值一个hash 其中V为 (key, value) 127.0.0.1:6379> hset user id 1(integer) ...
- BZOJ 4551: [Tjoi2016&Heoi2016]树
4551: [Tjoi2016&Heoi2016]树 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 748 Solved: 394[Subm ...
- 【学习笔记&训练记录】数位DP
数位DP,即对数位进行拆分,利用数位来转移的一种DP,一般采用记忆化搜索,或者是先预处理再进行转移 一个比较大略的思想就是可以对于给定的大数,进行按数位进行固定来转移记录答案 区间类型的,可以考虑前缀 ...
- linux最常用的20条命令
玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...
- 验证时出错。HRESULT = '8000000A'
往往出现在 做了安装项目后有警告: 解决办法: 这本来是在VS2005下创建的一下项目,后来改用VS2010的开发环境,.NET Framework的版本还是使用2.0, 但每次生成之后都会在解决方案 ...
- Unity 插件制作笔记（持续更新）
示例: [MenuItem(Menu1/Menu2)] static void TestMenu1() { Debug.log("点击了菜单"); } 导航菜单添加 [MenuIt ...
- CentOS普通用户添加sudo权限
1. 进入超级用户模式 su root 2. 添加sudoers文件写权限. chmod u+w /etc/sudoers 3.添加username到sudoers文件里(参考"root A ...
- SublimeREPL快捷键设置
SublimeREPL 允许你在 Sublime Text 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等).所以对于程序员来说,这是很重要的一个插件 ...