如何实现图片懒加载？

html-css015

如何实现图片懒加载？,第1张

懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的src属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的src属性，以此来实现图片的延迟加载。

图片懒加原理

图片懒加载的原理很简单，就是我们先设置图片的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/>

这个很简单：

在 html页面，引入zepto.lazyLoad.min.js，（是因为我使用的是zepto.min.js）

如果使用的是jquery.min.js框架，就引入jquery.lazyLoad.min.js，这里不赘述了。

主要是在ajax方法里，

把获得的img的拼接那里，有三点注意的地方！！！

1.class="test-lazyload" 

2. data-original="'+curriculums[i].imgUrl+'" 

3. src="'+GLOBAL_G.lazyImg+'"

html2+='<div class="imgBg"><img class="test-lazyload" data-original="'+curriculums[i].imgUrl+'" src="'+GLOBAL_G.lazyImg+'"></div>'

然后再append之后，调用$('.test-lazyload').picLazyLoad()

就可以了！！！！