fl-Lazyimg图片懒加载

基础使用

将img绑定在fl-Lazyimg标签中，设置img的src-data为图片路径即可使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BT3LEDf8-1656457297437)(https://csdn-img-blog.oss-cn-beijing.aliyuncs.com/5b19651920844816bd518861d28af1e8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2OTk1ODY0,size_16,color_FFFFFF,t_70)]

当页面滚动到图片区域的时候则为自动加载。

<template><Lazyimg><img src-data = "../src/assets/image/4.jpg"><img src-data = "../src/assets/image/5.jpg"><img src-data = "../src/assets/image/6.jpg"></Lazyimg>
</template>

源码：

<template><div><slot></slot></div>
</template><script>export default {name:'fl-Lazyimg',mounted () {this.imgDomList = this.$slots.default.filter(item=>{return item.tag == 'img'})this.imgDomList = this.imgDomList.map(item=>{       //分解所有IMG资源return item.elm})  this.obverseImg()},data() {return {imgDomList:[],      //图片组DOM}},methods: {obverseImg() {this.imgDomList.forEach((img,index)=>{var io = new IntersectionObserver(entries => {      //监听DOM是否可见if(entries[0].isIntersecting){io.unobserve(this.imgDomList[index]);           //数据取消劫持，展示图片setTimeout(() => {this.imgDomList[index].setAttribute('src',this.imgDomList[index].getAttribute('src-data'))}, 500); }});io.observe(this.imgDomList[index]);         //数据劫持监听})}},}
</script><style scoped></style>

手写Vue个人组件库——fl-Lazyimg 图片懒加载相关推荐

微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？
一.与image组件有关的技术问题 1.1 什么是WebP? webp是image组件的一个boolean属性,开启这个属性之后,代表url可以设置webp这种格式的图片.webP是一种同时提供了有损 ...
手写Vue个人组件库——fl-Breadcrumb
Breadcrumb 面包屑显示当前页面的路径,快速返回之前的任意页面. 基础用法适用广泛的基础用法. 你需要做的是将面包屑导航所包含的标题名和路径名以数组形式存放并绑定:breadcrumbDa ...
手写Vue个人组件库——fl-Tree 树形选择器
Tree 树形控件用清晰的层级结构展示信息,可展开或折叠. 基础用法基础的树形结构展示. 通过dataSource绑定数据源,使用afterToggle获得每次展开收起的回调方法. 同时你还可以配 ...
vue脚手架图片懒加载模块和样式穿透
1.vue样式穿透 vue样式穿透:在样式隔离的前提下,在父组件中修改子组件样式正常情况下,在样式隔离的前提下,父标签不能修改子组件样式.如果想修改子组件样式,使用样式穿透 1.1 样式穿透语法结构 ...
Vue之图片懒加载vue-lazyload
具体细节以及更多拓展可前往npm官网查看: https://www.npmjs.com/package/vue-lazyload Github了解源码:https://github.com/hilon ...
前端手写(二十二)——手写图片懒加载
一.写在前面图片懒加载是我们在开发中,需要进行处理的问题,也是前端性能优化的一个重要的因素. 二.手写懒加载 <script>function lazyload() {const img ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...

手写Vue个人组件库——fl-Lazyimg 图片懒加载

fl-Lazyimg图片懒加载

基础使用

手写Vue个人组件库——fl-Lazyimg 图片懒加载相关推荐

最新文章

热门文章