js图片加载效果实例代码(延迟加载+瀑布流加载)
时间:2019-03-30
本文章向大家介绍js图片加载效果实例代码(延迟加载+瀑布流加载),主要包括js图片加载效果实例代码(延迟加载+瀑布流加载)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
主要做了两种图片加载的效果
一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间)
另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果
一 延迟加载
主要思路:
- HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background
- js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background
- 每成功加载一张图片,进度条的百分比进行相应的变化。
- 如果加载不成功,就提示图片加载错误。
HTML结构很简单,就是一个div.picList包裹了所有img,然后加上一个简单的进度条div#loadBar
<body> <div class="picList"> <img class="lazy" data-src="pic/compressed/picList1.jg"> <img class="lazy" data-src="pic/compressed/picList2.jpg"> <img class="lazy" data-src="pic/compressed/picList3.jpg"> <img class="lazy" data-src="pic/compressed/picList4.jpg"> <img class="lazy" data-src="pic/compressed/picList5.jpg"> <img class="lazy" data-src="pic/compressed/picList6.jpg"> <img class="lazy" data-src="pic/compressed/picList7.jpg"> <img class="lazy" data-src="pic/compressed/picList8.jpg"> <img class="lazy" data-src="pic/compressed/picList9.jpg"> <img class="lazy" data-src="pic/compressed/picList10.jpg"> </div> <div id="loadBar"> <div id="loadBarMask"></div> </div> </body>
css(使用的scss,编译时会自动加上各种兼容前缀)
.picList{ img{ width: 100px; height: 100px; position: relative; /*加载失败时显示灰底文字*/ &:after{ content: "( ⊙ o ⊙ )加载失败"; font-size: 6px; font-family: FontAwesome; color: rgb(100, 100, 100); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ddd; } } } .lazy{ background: url(../pic/loading.gif) center no-repeat; border: 1px solid black; } #loadBar{ width: 200px; height: 15px; background: linear-gradient(90deg,#187103,#81b50b,#187103); border: 10px solid white; position: absolute; top: 150px; left: 50%; margin-left: -100px; #loadBarMask{ width: 70%;//这个数值显示没有加载成功的图片 height: 100%; background-color: beige; position: absolute; right: 0; } }
css里面需要注意的地方有两个:
- 一个是把图片加载错误时显示的灰底文字放在了img的after伪类中,当图片加载失败,又去掉了background的gif图片之后,就会显示这个部分的内容及样式。
- 一个是进度条的样式。写得很简单,主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载,白色表示未加载。显示的时候,直接控制白色那层的宽度即可。
js部分(直接执行loadPicPerSecond()即可)
var lazyPic = $('img.lazy'); var loadBarMask = $('#loadBarMask'); var picList = $('.picList'); var activePic = 0; var totalPic = lazyPic.length; /*每秒加载一张图片*/ function loadPicPerSecond(){ lazyPic.each(function(index){ var self = $(this); //console.log(self[0].complete); /*img标签已经事先写在html中,所以此时的complete状态全部都是true*/ setTimeout(function(){ src[index] = self.attr('data-src'); self.attr('src',src[index]); self.removeClass('lazy'); //图片获得正确src地址之后,可以执行下面的onload操作 self[0].onload = function(){ //加载读条loadBar动画 countPic(); } //图片获得的src地址不正确时,执行下面的onerror操作 self[0].onerror = function(){ /*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/ countPic(); } },1000*index); }) } /*根据onload的执行情况来计算当前的图片加载进度.每onload一次,activePic就增加1*/ function countPic(){ activePic++; var leftPic = totalPic - activePic; var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比,和loadBarMask的宽度占比配合 console.log("已加载"+(100-percentPic)+"%"); loadBarMask.css("width",percentPic+"%"); if(percentPic==0){ $('#loadBar').hide(); } }
二 瀑布流加载
主要思路:
- 监听窗口滚动情况,当已经加载的图片的最后一张快要进入窗口的时候,开始加载下面的图片。
- 假设所有的图片地址已经存在一个json数据中,每次读取10张图片地址,加载它们之后,插入到现有的瀑布流末尾。
- 如此往复,直到加载完所有图片。
HTML和前面部分相同,只是把src写成正常地址即可。css完全一样。
js部分
var lazyPic = $('img.lazy'); var loadBarMask = $('#loadBarMask'); var picList = $('.picList'); var scrollTop, clientHeight, scrollHeight; var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片 var src = []; var activePic = 0; var totalPic = lazyPic.length; //待加载的图片数据 var dirtSrc = "pic/compressed/picList"; var picData = {imgSrc:[ dirtSrc + "20.jpg", dirtSrc + "21.jpg", dirtSrc + "22.jpg", dirtSrc + "23.jpg", dirtSrc + "24.jpg", dirtSrc + "25.jpg", dirtSrc + "26.jpg", dirtSrc + "27.jpg", dirtSrc + "28.jpg", dirtSrc + "29.jpg", dirtSrc + "30.jpg", dirtSrc + "31.jpg", dirtSrc + "32.jpg", dirtSrc + "33.jpg", dirtSrc + "34.jpg", dirtSrc + "35.jpg", dirtSrc + "36.jpg", dirtSrc + "37.jpg", dirtSrc + "38.jpg", dirtSrc + "39.jpg", dirtSrc + "40.jpg", dirtSrc + "41.jpg", dirtSrc + "42.jpg", dirtSrc + "43.jpg", dirtSrc + "44.jpg", dirtSrc + "45.jpg", dirtSrc + "46.jpg", dirtSrc + "47.jpg", dirtSrc + "48.jpg", dirtSrc + "49.jpg", ]}; //加载次数计数器 var scrollIndex = 0; $(function(){ /*监听窗口滚动情况*/ $(window).on('scroll',function(){ scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop clientHeight = $(window).height(); scrollHeight = picList.last().height();//picList.last()[0].clientHeight /*目标与窗口的距离达到阈值时开始加载*/ if(scrollHeight-clientHeight-scrollTop < threshold){ scrollPic(10); } }) }) /*根据滚动程度加载图片,每次加载perAmount张*/ function scrollPic(perAmount = 10){ var totalAmount = perAmount * (scrollIndex+1); //考虑到最后一次加载的时候,剩余的图片数量有可能达不到限定的每次加载的数量,这时候需要更改totalAmount的值 if(totalAmount>picData.imgSrc.length){ totalAmount = picData.imgSrc.length; } for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){ var oimg = new Image(); oimg.src = picData.imgSrc[scrollIndex]; picList.append(oimg); } }
比较捉急的就是scrollTop、height那几个值的取值对象,总是记不清楚,所以按照js和jquery都写上了,以后可以直接用。将数值关系搞定之后,只要满足条件就触发加载即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-分配角色给用户
- 体验vs11 Beta
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(25)-权限管理系统-系统管理员(附生成器)
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(24)-权限管理系统-将权限授权给角色
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(23)-权限管理系统-角色组模块
- jQuery Gallery Plugin在Asp.Net中使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(20)-权限管理系统-根据权限获取菜单
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(19)-权限管理系统-用户登录
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(21)-权限管理系统-跑通整个系统
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(18)-权限管理系统-表数据
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(17)-LinQ动态排序
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(16)-权限管理系统-漂亮的验证码
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(42)-工作流设计-表建立
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode41|数组中数组出现的次数
- Django后台管理界面修改(源文件修改)
- 前端工程师不可不知的Nginx知识
- Django1.11 简单登录注册
- 基因表达聚类分析之初探SOM - 自组织特征图
- JMH - Java 代码性能测试的终极利器、必须掌握
- 从零搭建Spring Boot脚手架(6):整合Redis作为缓存
- 换一种姿势挖掘CORS漏洞
- 新的Spring OAuth2.0 授权服务器项目正式发布
- spring boot整合apollo
- 枚举和List的几个共有方法
- AtomicInteger源码解析
- AtomicIntegerArray源码解析
- AtomicIntegerFieldUpdater源码解析
- “终于懂了” 系列:Android屏幕刷新机制—VSync、Choreographer 全面理解!