javascript组件——lazyload

前言:lazyload是一个懒加载的基于jquery的懒加载的库。

实现原理:实现原理是在当图片不在视图区域内时,用一个class lazy标识图片,先将该图片的src置为空,把真正的url放到一个自定义属性里面。当检测到该图片需要被展示时,获取自定义属性里真正的url,修改到src里面,实现图片的懒加载。

基于lazyload的实现原理,写了一个demo。以下为代码分析:


缺省配置:

	var default_settings = {
		event: 'scroll',
		failure_limit: 0,
		effect: 'show',
		container: window,
		data_attribute: 'original',
		skip_invisible: false,
		load: null,
		appear: null,
		placehold: './placeholder.png'
	}

构造器部分:

function lazyLoad(elements,options){
        this.$elems = $(elements);
        this.settings = $.extend({},options,default_settings);
        this.$container = (this.settings.container == 'window'|| this.settings.container == undefined) ? $(wind
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值