时间：2021-07-01 10:21:17 帮助过：11人阅读
主要做了两种图片加载的效果
一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了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()即可）
二 瀑布流加载
主要思路：
监听窗口滚动情况，当已经加载的图片的最后一张快要进入窗口的时候，开始加载下面的图片。
假设所有的图片地址已经存在一个json数据中，每次读取10张图片地址，加载它们之后，插入到现有的瀑布流末尾。
如此往复，直到加载完所有图片。
HTML和前面部分相同，只是把src写成正常地址即可。css完全一样。
js部分
比较捉急的就是scrollTop、height那几个值的取值对象，总是记不清楚，所以按照js和jquery都写上了，以后可以直接用。将数值关系搞定之后，只要满足条件就触发加载即可。
【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 免费js在线视频教程
3. php.cn独孤九贱（3）－JavaScript视频教程
以上就是js图片加载的两种效果实例代码的详细内容，更多请关注Gxl网其它相关文章！