Skip to content

原创,懒加载模版,轻量级,适合大量图片页面、速度较快、使用方便。大三实习所写,目前已停更

License

Notifications You must be signed in to change notification settings

defaultProps/lazyload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

什么是懒加载 ??

让浏览器延迟加载资源,改变浏览器默认加载顺序,先加载界面,页面初始时的页面图片全部加载,滚动条下和用户未看到的不显示,当用户滑动页面往下时开始请求图片加载,始终是加载用户所看到的视口内的图片.....

为什么要懒加载 ??

以便快速加载页面显示给用户看,提高用户的体验感,给与用户一种加载变快速的错觉...

如何使用该代码 ??

仅仅使用script标签链接该js文件,然后初始化lazyload,就OK了... 举例:

    <script src="lazyload.js" />
    <script>
        lazyLoad.init({
            offset : 100 , /*视线偏移量*/   
            delay : 250, /*延迟加载时间一般是在250ms  1500ms之间*/
            styl : '{{用户自定义css属性或者url}}' /*用户自定义属性填充背景*/
        });
    </script>

版本1.0>>>已经抛弃

1.用户可以控制图片加载完成后显示页面的时间间隔...

2.用户可以控制图片加载时间是在用户视线内还是相隔底部距离时开始加载,在一定范围内越大用户体验感更好...

3.开发者仅仅需要在img标签里添加data-lazy属性,并且该属性存放url,代码懒加载...

4.图片区域开始未加载一张默认图片导致用户看到一块空白

5.图片加载异常没有反馈错误信息

6.必须滚动才会开始加载图片

版本2.0

优点:

1.在版本1.0的基础上增加了新功能,解决了版本1.0出现的图片未加载出现空白区域 用户可以自定义图片未加载时的背景样式,也可以初始化加载一张默认的背景图片,推荐加载一张小存量浅灰色的矢量图便于快速加载...

2.优化了图片加载时出现的403,404等错误信息提示

3.解决了版本1.0出现的必须滚动才能加载图片问题

作者 [@Mr.Tom][https://github.com/hellolittleBear/lazyload]     2018 年 05月 06日  

About

原创,懒加载模版,轻量级,适合大量图片页面、速度较快、使用方便。大三实习所写,目前已停更

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published