转：Vue图片懒加载原理和实现 Vue 中实现图片预加载 + 懒加载原理实现
Vue图片懒加载原理及实现 原理分析 先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可视窗口时，再将实际地址应用。
实现方法 1.判断元素是否在可视范围 1 2 3 4 5 6 7 8 9 10 11 12 /** * 判断元素是否在可视范围 */ function isVisible(ele){ let windowHeight = window.innerHeight let position = ele.getBoundingClientRect() // 当元素的top偏移量小于页面大小并且大于高度的负数 if (position.top<windowHeight && position.top>-position.height){ return true } return false }
2.对图片实现懒加载 1 2 3 4 5 6 7 8 9 10 /** * 对图片进行懒加载 */ function lazyLoad(img, src){ if (img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见 setTimeout(function img.setAttribute('src' , src) }, 1000) // 模拟网络请求 } }
3.添加滚动监听 1 2 3 4 // 窗口滚动 window.addEventListener('scroll' , function lazyLoad(img, src) })
Vue插件实现代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 /** * 判断元素可见 */ function isVisible(el){ let windowHeight = window.innerHeight let position = el.getBoundingClientRect() // 当元素的top偏移量小于页面大小并且大于高度的负数 if (position.top<windowHeight && position.top>-position.height){ return true } return false } /** * 对图片进行懒加载 */ function lazyLoad(img, src){ if (img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见 setTimeout(function img.setAttribute('src' , src) }, 1000) // 模拟网络请求慢的情况 } } export default { install(Vue, options){ Vue.directive('lazy' , { bind : function (el, binding, vnode){ el.setAttribute('src' , options.loading) window.addEventListener('scroll' , function lazyLoad(el, binding.value) }) }, inserted: function (el, binding, vnode){ lazyLoad(el) } }) } }
main.jsVue.use(myPlugin, {loading: defaultImg})
在Vue中使用 vue-lazyload插件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyload) 或者添加自定义选项 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png' , loading: 'dist/loading.gif' , attempt: 1 }) 3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy） <a href="javascript:;" > <img v-lazy="'/static/img/' + item.productImage" > </a>
评论和共享
