欢迎点击: 个人官网博客
预加载(进度)
比如一些公众号h5宣传页面,受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者闪屏; 进入页面的时候把图片全加载一遍,就不会出现图片加载慢显示慢的情况
效果图:
<script>
//页面所有img标签的集合
let img = document.getElementsByTagName("img");
function yuLoad() {
let index = 0
for (let i = 0; i < img.length; i++) {
let src = img[0].getAttribute('src')
let oImg = new Image()
oImg.src = src
oImg.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.fetchStart
console.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 imgItem
for (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