欢迎点击: 个人官网博客
预加载(进度)
比如一些公众号h5宣传页面，受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 进入页面的时候把图片全加载一遍，就不会出现图片加载慢显示慢的情况
效果图：
<script>//页面所有img标签的集合let img = document.getElementsByTagName("img");function yuLoad() {let index = 0for (let i = 0; i < img.length; i++) {let src = img[0].getAttribute('src')let oImg = new Image()oImg.src = srcoImg.onload = () => {index++if (index == img.length) {setTimeout(begin, 500);function begin() {//全部加载完后执行}}//加载进度console.log(Math.floor(index / img.length * 100 )+ '%')}}}window.addEventListener('load', (e) => {let timing = performance.getEntriesByType('navigation')[0]let tti = timing.domInteractive - timing.fetchStartconsole.log(tti) //加载资源所花的时间})document.onreadystatechange = function () {if (document.readyState == 'complete') {console.log('ok') //加载资源完毕// isload=false}}</script>
最后预加载如果使用插件的话可以试试 pace.js，preloadjs
懒加载(进度)
一张图片就是一个img标签，浏览器是否发起请求图片是根据img的src属性，所以在图片没有进入可视区域时，先不给img的src赋值，真正路径存储在data-src属性里面，这样浏览器就不会发送请求了，等到图片进入可视区域再取出data-src属性里面的值给src赋值,这里可以统一用一张loading.png作为src默认值告诉用户正在加载中。
效果图：(随着页面的滚动按需加载图片)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 300px;height: 300px;}</style></head><body><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""><img src="./img/load.gif" data-src="./img/0.jpg" alt=""></body><script>let img = document.getElementsByTagName("img");let count = img.length;lazyload(); //首次加载别忘了显示图片window.addEventListener('scroll', ()=>{//页面滚动事件setTimeout(()=>{lazyload()},500)//节个流});function lazyload() {let viewHeight = document.documentElement.clientHeight || document.body.clientHeight; //视口高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条卷去的高度let imgItemfor (let index = 0; index < count; index++) {imgItem = img[index]if (imgItem.offsetTop < viewHeight + scrollTop) {if (imgItem.getAttribute('data-src')) {imgItem.src = imgItem.getAttribute('data-src')imgItem.removeAttribute('data-src')}}}}</script></html>
最后懒加载如果使用插件的话可以试试 echo.js，lazy.js
