当前位置:首页 > 代码·功能 > 正文

jQuery图片延迟加载插件Lazy Load

jQuery

图片流量太多?可是有的人们只是点击一下便关闭了网页!那么这些流量不就浪费了吗?

不用害怕了!图片多,无所畏惧!我们有延时加载!

这技术对大流量站的带宽来说,节省的成本非常可观!

演示页面:点击查看

部分文件预览:

var LazyLoad = function(elems, options) {
	//初始化程序
	this._initialize(elems, options);
	//如果没有元素就退出
	if ( this.isFinish() ) return;
	//初始化模式设置
	this._initMode();
	//进行第一次触发
	this.resize(true);
};

LazyLoad.prototype = {
  //初始化程序
  _initialize: function(elems, options) {
	this._elems = elems;//加载元素集合
	this._rect = {};//容器位置参数对象
	this._range = {};//加载范围参数对象
	this._loadData = null;//加载程序
	this._timer = null;//定时器
	this._lock = false;//延时锁定
	//静态使用属性
	this._index = 0;//记录索引
	this._direction = 0;//记录方向
	this._lastScroll = { "left": 0, "top": 0 };//记录滚动值
	this._setElems = function(){};//重置元素集合程序
	
	var opt = this._setOptions(options);
	
	this.delay = opt.delay;
	this.threshold = opt.threshold;
	this.beforeLoad = opt.beforeLoad;
	
	this._onLoadData = opt.onLoadData;
	this._container = this._initContainer($$(this.options.container));//容器
  },
  //设置默认属性
  _setOptions: function(options) {
    this.options = {//默认值
		container:	window,//容器
		mode:		"dynamic",//模式
		threshold:	0,//加载范围阈值
		delay:		100,//延时时间
		beforeLoad:	function(){},//加载前执行
		onLoadData:	function(){}//显示加载数据
    };

js文件下载  当然你也可以百度一下的啦!

标签:
上一篇: 下一篇:

16 条评论

评论加载中...
  1. 地板
    来自天朝的朋友 谷歌浏览器 Linux
    steven  

    这个插件我用过,后来发现一个小问题,如果文章列表中含有部分图片,它会让图片懒加载,结果是图片非常小。

    2017年7月29日 09:43 评论
  2. 板凳
    来自天朝的朋友 未知浏览器 Unknow Os
    灰常记忆  

    怎么不说详细点~

    2015年1月25日 16:55 评论
  3. 沙发
    来自天朝的朋友 未知浏览器 Unknow Os
    Han  

    图片多的话加上这个不错!

    2015年1月22日 23:11 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……