[rpLazyLoading]基于jQuery的惰性加载图片1.0

作者: pengpeng 分类: 所有文章 发布时间: 2018-10-23 23:30

rpLazyLoading是基于jQuery自己写的一个惰性加载的插件,因为喜欢用自己的东西。知道原理就尽量自己去弄。使用也非常简单。

说明链接:http://look.renpengpeng.com/post-id/927

百度网盘:https://pan.baidu.com/s/1AUCnLywMUu4ABszQzc3lGA  提取码:nldp

cdn:http://cdns.renpengpeng.com/cdn/rpLazyLoading/1.0/rpLazyLoading.min.js

 

引入jQuery和rpLazyLoading之后再页面调用:

$(function(){

$(标签).rpLazyLoading();

})

比如我惰性加载图片可以这样写:$(‘img’).rpLazyLoading();

同时加载video和img:$(‘img,video’).rpLazyLoading();

加载样式表:$(‘link’).reLazyLoading({‘replace’:’href’});

 

切记:在要惰性加载的标签,一定要加上一个属性:rp-lazy=””

如果不写,则检测不到要更改的链接不生效,所以一定要写上,比如一个完整的标签为:

<img src=”loading.gif” rp-lazy=”xxxxx”>

 

即可生效,可用于惰性加载img、video、link样式表等

插件为1.0版本,只提供了简单的几个参数可用于用户设置。

可自定义的属性:
debug => (bool)true/false (调试模式 默认:false)
replace => (string) (要替换的属性 默认:src)
fade => (bool)true/false (动画渐渐显示效果 默认:true)
fadeNum => (int) (配合上一项 fade为true时生效 渐显动画时长 默认300ms)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注