整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天给大家带来了四个线条进行环绕的加载中的效果，我放大了给你们看看，但是你们可以看到，每个线条的旋转动作是一个圆形。
下面是代码区域，我使用的是vivo试图容器，里面包含了第二个试图容器，里面有五个vivo试图容器，前面这四个代表着四根线条，线条下面是文字。主要的是css代码区域，我使用的是开发工具是s plus x，是开发uniap的。
先给大家解释一下代码部分。
·首先是第一个vivo式图容器，使用弹性布局集中对齐，顶部距离进行相反像素的设置。
·第二个又是图中签，也是进行绝对定位，集中对齐相对定位等。
·下面就是h三，文字是白色，大家可以看到知道。
·这是第一个线条，设置了一个宽度、高度、边框、透明度、圆角、绝对定位。主要是第一根线条的动作是个动画，进行了应用旋转动画，无限循环。边框颜色为了粉色，大家可以看到粉色，因为为什么这么细？大家可以看到因为在防木人状态下设置了一个一的边框，线条的宽度是一，所以是细的。
·第二个就是第一个线条动画，它引用是哪个动画？就是下面设置一个旋转角度和结束的旋转角度形成一个圆形，从五十到一百一，再从五十到四百七，大家可以看一下形成这么个动画。
·下面第二根线条、第三根线条、第四根线条基本上都是一样的动画，所以大家只需要把第一根线条的写法知道就行了。
·下面的其实位置的变化而已和颜色大家可以看到，其他地方基本上没有太多的区别，就是美国旋转的角度是不一样的。第一个旋转角度是四百七，第二个是三百八，然后是九十，然后是六百三，就这不一样，价格方都是一样的。
感兴趣的同学可以找我唠嗑进行获取元代码，进行二十四的编写也可以，也可以自己去手动去学。
喜欢的可以点赞收藏一下，本期就讲到这。
最终效果
从第一个静止的矩形开始
源码
然后让它动起来
源码
其实就是不断的拉长和缩短
依样画葫芦
再添加4个矩形
此时它们看起来是这样的，这不是我们想要的效果
因为没有给它们分别指定不同的延迟时间，所以它们的步调是一致的。接下来分别给它们指定不同的延迟时间
animation-delay，可以指定负数，指定负数的意思是动画立刻开始，但跳过指定秒数进入动画,比如这里第一个指定的是-1.2s，也就是说动画开始时从1.2秒处开始，前面的1.2秒跳过！
希望的效果出现了
当然我们也可以不指定负数，看看效果如何
刚好相反
在Web开发中经常会遇到一些性能问题，有很多原因就是因为一次性请求过多导致的，而懒加载是一种在不影响原有界面，当界面需要展现给用户才进行加载和请求，常见的就是图片的加载，在很多电商页面中最常见，通过懒加载的方式提升了页面的性能，用户体验也会更好了。
现有的延迟加载库依赖窗体的滚动事件，或者使用定期计时器并调用在需要延迟加载的元素上getBoundingClientRect()。然而，这种方法非常缓慢，因为每次调用getBoundingClientRect()强制浏览器重新布局整个页面而lozad.js不依赖这些，因此性能很好。
https://github.com/ApoorvSaxena/lozad.js
lozad.js是使用纯JavaScript实现的不借助图像或iframe的高性能且轻量级可配置延迟加载器，它的思想是观察者模式
最新版本在于有基础上性能得到了极大地提升。
npm install --save lozad
//OR
yarn add lozad
//OR
bower install lozad
// using ES6 模块
import lozad from 'lozad'
// using CommonJS 模块
var lozad = require('lozad')
或者直接引用cdn或本地js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
举例：
html：
<img class="lozad" data-src="image.png" />
js:
const observer = lozad(); // '.lozad'作为默认类选择器 observer.observe();
自己引入dom：
const el = document.querySelector('img');
const observer = lozad(el);
document.querySelectorAll()
observer.observe();
自定义配置：
const observer = lozad('.lozad', {
rootMargin: '10px 0px',
threshold: 0.1
});
observer.observe();
背景图片：
<div class="lozad" data-background-image="image.png"> </div>
IFrame：
<iframe data-src="embed.html" class="lozad"></iframe>
更多使用实例参考Github，提供了图片、背景图等使用方式
支持大多数浏览器，如果不支持需要引入polyfill
提升Web页面的性能方法多种多样，懒加载就是其中一种，如果你追求极致的性能，不妨试一试lozadjs，期待对你有所帮助！
*请认真填写需求信息，我们会在24小时内与您取得联系。
