js图片加载的两种效果实例代码

来源：懂视网责编：小采时间：2020-11-27 20:22:44

js图片加载的两种效果实例代码

js图片加载的两种效果实例代码:本篇文章主要介绍了js图片加载效果实例代码（延迟加载+瀑布流加载），非常具有实用价值，需要的朋友可以参考下主要做了两种图片加载的效果一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）另外一种是根

推荐度：

点击下载本文 文档为doc格式

导读js图片加载的两种效果实例代码:本篇文章主要介绍了js图片加载效果实例代码（延迟加载+瀑布流加载），非常具有实用价值，需要的朋友可以参考下主要做了两种图片加载的效果一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）另外一种是根

本篇文章主要介绍了js图片加载效果实例代码（延迟加载+瀑布流加载），非常具有实用价值，需要的朋友可以参考下

主要做了两种图片加载的效果

一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）

另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果

一延迟加载

主要思路：

HTML的img标签中，将正确的地址存在src属性中，给所有图片设置一个转圈圈的loading图片作为background
js中，依次读取每一个img，将src中的地址替换到src中，去掉background
每成功加载一张图片，进度条的百分比进行相应的变化。
如果加载不成功，就提示图片加载错误。

HTML结构很简单，就是一个p.picList包裹了所有img，然后加上一个简单的进度条p#loadBar

<body>
 <p class="picList">
 <img class="lazy" src="pic/compressed/picList1.jg">
 <img class="lazy" src="pic/compressed/picList2.jpg">
 <img class="lazy" src="pic/compressed/picList3.jpg">
 <img class="lazy" src="pic/compressed/picList4.jpg">
 <img class="lazy" src="pic/compressed/picList5.jpg">
 <img class="lazy" src="pic/compressed/picList6.jpg">
 <img class="lazy" src="pic/compressed/picList7.jpg">
 <img class="lazy" src="pic/compressed/picList8.jpg">
 <img class="lazy" src="pic/compressed/picList9.jpg">
 <img class="lazy" src="pic/compressed/picList10.jpg">
 </p>

 <p id="loadBar">
 <p id="loadBarMask"></p>
 </p>
</body>

css（使用的scss，编译时会自动加上各种兼容前缀）

.picList{
 img{
 width: 100px;
 height: 100px;
 position: relative;

 /*加载失败时显示灰底文字*/
 &:after{
 content: "( ⊙ o ⊙ )加载失败";
 font-size: 6px;
 font-family: FontAwesome;
 color: rgb(100, 100, 100);
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 top: 0;
 left: 0;
 width: 100px;
 height: 100px;
 background-color: #ddd;
 }
 }
}

.lazy{
 background: url(../pic/loading.gif) center no-repeat;
 border: 1px solid black;
}

#loadBar{
 width: 200px;
 height: 15px;
 background: linear-gradient(90deg,#187103,#81b50b,#187103);
 border: 10px solid white;

 position: absolute;
 top: 150px;
 left: 50%;
 margin-left: -100px;

 #loadBarMask{
 width: 70%;//这个数值显示没有加载成功的图片
 height: 100%;
 background-color: beige;
 position: absolute;
 right: 0;
 }
}

css里面需要注意的地方有两个：

一个是把图片加载错误时显示的灰底文字放在了img的after伪类中，当图片加载失败，又去掉了background的gif图片之后，就会显示这个部分的内容及样式。
一个是进度条的样式。写得很简单，主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载，白色表示未加载。显示的时候，直接控制白色那层的宽度即可。

js部分（直接执行loadPicPerSecond()即可）

二瀑布流加载

主要思路：