JS实现图片预加载是什么意思?是要实现怎么样的效果?

JavaScript013

JS实现图片预加载是什么意思?是要实现怎么样的效果?,第1张

是的,预加载会减慢网页打开速度,但是一但打开了话,后面就会很流畅了。楼上的仁兄说的很清楚,跟你举个形象的例子吧,比如40分钟的电视剧,要加10分钟的广告,你是希望先加10分钟,然后很流畅的看电视剧呢,还是希望一开始不加,然后每隔10分钟加2分钟的广告呢?

图片懒加原理

图片懒加载的原理很简单,就是我们先设置图片的data-set属性(当然也可以是其他任意的,只要不会发送http请求就行了,作用就是为了存取值)值为其图片路径,由于不是src,所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和,如果图片举例页面顶端的坐标Y(相对于整个页面,而不是浏览器窗口)小于前两者之和,就说明图片就要显示出来了(合适的时机,当然也可以是 其他情况),这时候我们再将 data-set属性替换为src属性即可。

图片懒加载实现步骤:

1. 在main.js中导入Vant中的Lazyload指令并注册:

import Vue from 'vue'import { Lazyload } from 'vant' // 导入懒加载模块LazyloadVue.use(Lazyload) // 注册懒加载指令

2. 为van-image设置lazy-load指令属性

<!-- lazy-load设置图片懒加载,是一个自定义指令 --><van-image width="90" height="90" :src="item2" lazy-load/>