基于Vue2.0实现屏幕可视区域图片懒加载
基于Vue2.0可视区域图片懒加载
指令代码
export default (Vue) => {
var imageCatcheList = [];
//初始化数据
var init= {
default: 'http://test.group.batmobi.net/dist/image/transprent.png',
}
//是否已下载
const hasLoad= (src) => {
if (imageCatcheList.indexOf(src) > -1) {
return true;
}
else {
return false;
}
}
//图片下载处理
const imageLoad= (el, src) => {
var image= new Image();
image.onload = function () {
el.src = https://www.it610.com/article/src;
imageCatcheList.push(src);
}
image.src= src;
}
//是否可以展示
const isCanShow= (el, src) => {
//节点离浏览器顶部的距离
var offsetTop= el.offsetTop;
//页面可视区域的高度
var windowHeight = window.innerHeight;
var scroll= windowHeight + window.scrollY;
var offsetHeigth = el.offsetHeight;
if (scroll > offsetTop && (window.scrollY - offsetTop) < offsetHeigth) {
//查询图片是否已加载过，是则直接加载，否则先load
if (hasLoad(src)) {
el.src = https://www.it610.com/article/src;
}
else {
imageLoad(el, src);
}
}
}const addListener = (el, bind) => {
var imageSrc = https://www.it610.com/article/bind.value;
//赋值默认值
el.src= init.default;
isCanShow(el, imageSrc);
window.addEventListener('scroll', function (event) {
isCanShow(el, imageSrc, event);
});
}Vue.directive('lazy', {
inserted: addListener,
updated : addListener,
})
}使用方法
- 在main.js中注册指令
Vue.use(imgLazyload);
- 【基于Vue2.0实现屏幕可视区域图片懒加载】在*.vue组件中加载指令
文章图片
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 基于爱，才会有“愿望”当“要求”。2017.8.12