swiper 弹出图片_结合swiper使用图片懒加载
记录下笔记,大神勿喷,可以留下优化建议,谢谢
最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个插件,但没想到怎么跟swiper结合使用,就自己写了个方法,但原理是一样的,就是swiper除了首屏的图片加载以外,其他页面的图片不加载,也就是src属性不给赋值,然后当每次滑动到下一屏的时候图片在加载,可以优化初次加载过慢。
首先,除了首屏的图片正常加载以外,其他页面的img标签正常写入,但不给src赋值,自定义属性data-original=“img/secondPage/2_text.png”,自定义属性的值为你img中src所要加载的图片
当然细心的同学会看到还有个data-original@2x的属性,其实很明显,做适配用的,这个一会在做解释。
然后js定义个函数
这个函数需要传个值,就是swiper下面每页的下标值index,然后循环每页的img,通过attr把data-original的值赋给src,当然你会看到一个判断,也可以看得出是判断设备的像素比的,然后加载不同倍数的图片,这就是上面定义data-original@2x的原因
最后调用,swiper有个方法是onSlideChangeStart,就是改变每一屏的时候执行,
index值可以通过swiper的属性获取,当滑动的时候就可以加载下一屏的图片了,当然首屏的图片是提前加载好的,所以是!0的时候执行
请大神留下宝贵建议,谢谢
swiper 弹出图片_结合swiper使用图片懒加载相关推荐
- vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多 问题起源于我们的一个页面,下 ...
- vue-photo-preview踩坑,el-table中一张错误图片导致全部图片无法放大,并且与懒加载v-lazy不兼容
需求:el-table中展示的图片,可以点击放大,并且使用懒加载(偶尔会有404的图片路径) 坑一: 一张404图片会导致全部图片无法放大,用@error解决 坑二: 但是马上发现如果用了vue-la ...
- 利用JS弹出层实现简单的动态提示“正在加载中,请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
- 利用JS弹出层实现简单的动态提示“正在加载中,请稍等...
最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...
- 微信小程序点击按钮弹出弹窗_微信小程序带图片弹窗简单实现
怎样实现一个带图片显示的模态视图弹窗呢?有时候我们的确有这个需求,自己实现?不不不,哪有官方的方便! 使用官方组件实现图片模态弹窗 下面我来介绍一种使用官方组件就能实现的方法: (PS:最近发现一个问 ...
- js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...
- iframe懒加载_懒加载是如何实现的?
作为网页内容的一部分,图像和视频通常要消耗很多资源加载.要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了.但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手.幸运的 ...
- Jquery图片懒加载和预加载
Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
- JS使用onscroll、scrollTop实现图片懒加载
今天做到项目中的图片展示,由于每一页的图片数量都很多,因此需要为图片的展示设计一种懒加载的功能. 第一要做的当然就是给程序添加滚动监听事件. 1 //触发拉取图片开关,保证正在拉取时不能再次触发 2 ...
- jquery之图片懒加载(总结)
2019独角兽企业重金招聘Python工程师标准>>> 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮 ...
最新文章
- DataGrid的几个小技巧
- 【相机标定】四个坐标系之间的变换关系
- 用于检测AC电压的无接触电压检测器
- Java后端,应该日常翻看的中文技术网站
- spring学习---IOC--基于xml--bean管理--spring创建对象--spring注入属性--其他属性注入--外部bean--内部bean
- 做个简单的Java学生考勤系统04--签到功能的开发
- python控制安捷伦频谱仪_安捷伦频谱仪使用说明
- ev4加密视频转换成MP4格式
- 计算机一个小键盘按不出来怎么办,巧妙解决电脑键盘右边的数字键失灵问题
- sox源码分析:sox_find_effect()
- html中如何显示代码样式方法
- 【CVPR2020视频超分辨率】Zooming Slow-Mo: Fast and Accurate One-Stage Space-Time Video Super-Resolution 阅读笔记
- 公告:CSDN个人空间即将改版
- 姜思达和机器人_《奇葩说》姜思达爱上人工智能 马东发全网通缉令寻人
- HDD与你相约深圳,一起探讨创新开发与运营增长
- [license]MIT,BSD,Apache几种开源协议之间的区别
- 如何得知生产系统高峰时期的最大连接数?
- Activity的四种状态
- ZZULIOJ1044: 不及格率
- 2020年中级数据库系统工程师考试笔记14—标准化和知识产权基础知识
热门文章
- Project中最常用的注意点
- 我爱我专业计算机为主题的演讲稿,我爱我专业演讲稿
- android 设置单边框,Android设置单边圆角边框
- win10查看计算机管理员,win10系统下怎么获取administrator管理员权限
- 两句话中的不常见单词(Uncommon Words from Two Sentences)java
- 串口中断处理 m=SBUF; SBUF=m;自收发
- 魔兽世界修改服务器配置文件,worldserver.conf 服务端配置文件说明
- 虚拟机KALI2022.2下安装GVM
- 玩游戏使用云服务器,云服务器可以玩大型游戏吗?
- 会计电算化什么是计算机硬件,会计电算化考试计算机硬件、软件.doc