图片延迟加载jquery插件imgLazyLoading
实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦
引入图片延迟加载Jquery插件文件后,页面使用代码如下:
<script type="text/javascript" charset="utf-8">
$(".lazyLoading").imgLazyLoading({
// 记录图片真实地址的属性名
url : "data-url",
// 图片渐出效果以及渐出时间
fadeIn : 400
});
</script>
JS插件代码:
/**======================================
* 名称:imgLazyLoading
* 描述:基于jQuery的图片延迟加载插件
* 版本:1.0.1
* 日期:2013-6-18
* 兼容:在火狐,IE6-10,谷歌,360测试OK
* 来源:
使用方式:
<script type="text/javascript" charset="utf-8">
$(".lazyLoading").imgLazyLoading({
// 记录图片真实地址的属性名
url : "data-url",
// 图片渐出效果以及渐出时间
fadeIn : 400
});
</script>
如果用户禁用了JS解决方案
<noscript><img src="" /></noscript>
这是目前最简单和最有效的解决js在禁用
的情况下依然显示图片
=======================================**/ //定义匿名函数并立即执行
(function($){ $.fn.imgLazyLoading = function(options)
{
//定义需要的参数的初始值,合并options对象然后赋值到变量set,如果存在相同的值那么进行覆盖
var init = $.extend({url:"data-url",fadeIn:0},options || {});
var cache = []; //为所有指定class="lazyloading"的元素执行这个匿名函数
$(this).each(function()
{
var nodeName = this.nodeName.toLowerCase();//返回节点的名称,并且转换为小写
var url = $(this).attr(init.url);//获取options参数的值
//获取每个元素的信息,存入临时对象data里面,然后插入到cache对象
var data = {
obj : $(this),//当前选中的元素
url : url,//图片指向地址
tag : nodeName//节点的名字
}
cache.push(data);//向cache数组的末尾添加元素,并返回新的长度
}); var lazyLoading = function()
{
//用each函数遍历cache数组
$.each(cache,function(key, val)
{
var obj = val.obj;
var url = val.url;
var tag = val.tag;
if(obj)
{
var winHeight = $(window).height();//当前窗口高度
var scrolltop = $(window).scrollTop();//滚动条偏移高度
var imgTop = obj.offset().top;//图片元素在当前视口的相对偏移
//判断是否在当前窗口内
if((imgTop-scrolltop) > 0 && (imgTop-scrolltop) < winHeight)
{
if(tag === "img")
{
if(init.fadeIn)
{
//渐出效果
obj.fadeIn(init.fadeIn);
}
//给src属性赋值
obj.attr("src", url);
}
else
{
return false;
}
val.obj = null;//清空,不清空会重复负责,重复请求
}
}
});
}
//加载后立即执行
lazyLoading();
//添加滚动事件
$(window).bind("scroll",lazyLoading);
};
})(jQuery);
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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>网友猎人分享原创图片延迟加载jquery插件</title>
<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="imglazyloading.js"></script>
</head>
<body>
<div style="height:800px;width:700px; text-align:center; font-size:20px; font-weight:bold; margin:30px auto; color:#FF0000;">鼠标往下滚动就可以看到效果啦</div>
<img data-url="images/11235MW1-4.jpg" class="lazyLoading"/>
<img data-url="images/11235L447-3.jpg" class="lazyLoading"/>
<img data-url="images/11235L305-1.jpg" class="lazyLoading"/>
<img data-url="images/11235K258-0.jpg" class="lazyLoading"/>
<script type="text/javascript" charset="utf-8">
$(".lazyLoading").imgLazyLoading({
// 记录图片真实地址的属性名
url : "data-url",
// 图片渐出效果以及渐出时间
fadeIn : 4000
});
</script>
</body>
</html>
HTML
转自:http://www.jq----school.com/Detail.aspx?id=282
图片延迟加载jquery插件imgLazyLoading的更多相关文章
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- 图片延迟加载jquery插件imgLazyLoad(三)
此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...
- 延迟加载图片的 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 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- Lazy Load, 延迟加载图片的 jQuery 插件【备忘】
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...
随机推荐
- ActiveMQ_安全配置(五)
如果Activemq不加安全配置,那么任何知道队列所在服务器IP的人都可以发送接收队列消息 安全配置主要是通过配置账号密码增强安全性 参考资料:http://activemq.apache.org/s ...
- 如何改变tableview的section的颜色
方法一:调用 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{ UIV ...
- 100114B
bfs #include<iostream> #include<queue> #include<cstring> #include<cstdio> us ...
- 浏览器XMLHttpRequest案例
/* Cross-Browser XMLHttpRequest v1.2 ================================= Emulate Gecko 'XMLHttpRequest ...
- Android Studio插件安装及使用Genymotion模拟器
Android Studio自带的模拟器速度已经比Eclipse插件的快一点了,但是还不够暴力,不够爽.现在来说说最暴力的Genymotion模拟器如何结合AS 使用.首先上Genymotion官网下 ...
- 【BZOJ-4653】区间 线段树 + 排序 + 离散化
4653: [Noi2016]区间 Time Limit: 60 Sec Memory Limit: 256 MBSubmit: 107 Solved: 70[Submit][Status][Di ...
- 【BZOJ-1069】最大土地面积 计算几何 + 凸包 + 旋转卡壳
1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 2707 Solved: 1053[Submit][Sta ...
- bzoj3295: [Cqoi2011]动态逆序对(cdq分治)
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
- [NOIP2014] 提高组 洛谷P2038 无线网络发射器选址
题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形成的网格状,并且相邻 ...
- SQLChop、SQLWall(Druid)、PHP Syntax Parser Analysis
catalog . introduction . sqlchop sourcecode analysis . SQLWall(Druid) . PHP Syntax Parser . SQL Pars ...