Skip to content

zjtt/EasyLazyload.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

EasyLazyload.js

1.0.0

超级好用的js 图片延迟加载插件
→不管怎么样先点进来看看效果(示例网页)

使用方法

  • 引入 EasyLazyload.js

  • 将图片 src 替换为 data-lazy-src

	<img data-lazy-src="..." />
  • 调用全局方法
	lazyLoadInit()

使用须知

  • 引入 EasyLazyload.js 前需要引用 jquery && zepto
  • 需要在开启服务下运行

参数列表 * 示例代码 ``` <script> lazyLoadInit({ coverColor:"white", coverDiv:"

test

", offsetBottom:0, offsetTopm:0, showTime:1100, onLoadBackEnd:function(i,e){ console.log("onLoadBackEnd:"+i); } ,onLoadBackStart:function(i,e){ console.log("onLoadBackStart:"+i); } }); </script> ``` * coverColor:图片即将显示时覆盖层的颜色 * coverDiv:图片即将显示时覆盖层可显示的土自定义组件 * offsetBottom:图片距离屏幕底部出现时间点的距离差值(注解:延迟加载图片会在图片顶部接触屏幕底部时出现,如果想要让图片顶部距离屏幕底部有一定距离时出现,请设置此值) * offsetTopm:图片距离屏幕底部出现时间点的距离差值(注解:同上,距离顶部) * onLoadBackEnd:图片已经完全出现时的回调函数,参数为(index,event)加载的图片下标,以及dom对象(dom对象为jquerydom或zeptodom对象) * onLoadBackStart:图片已经下载完成,即将开始显示时的回调函数(参数同上)
EasyLazyload.js 优点
  • EasyLazyload.js 是真延迟加载 而且不会对样式有任何影响。

  • 队列式加载,不会影响页面效率。

  • 不需要设置任何宽高,简单易用

About

超简单图片延迟加载js插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 52.9%
  • JavaScript 47.1%