图片懒加载、ajax异步调用数据、lazyload插件的使用
关于这个效果还是很简单的，样式部分我就不多说了，我就简单的写了一下布局，
这是css样式
我们先说一下实现的原理。
我们都知道在于图片的引入，我们都是用src来引入图片地址。从而实现图片的显示。那我们让他开始不加载src的地址，把src的地址放在一个自定义属性中（自定义属性，HTML5的新特性）；
这样我们就可以把地址都放在自定义属性中，当我们需要的时候，在放在src中。
那懒加载是怎么加载？开始加载几条信息，当我们阅读完了以后接着加载。
在移动端，都是在滑块到底的时候，我们触发请求，让他请求更多的图片，在pc端就有分页的一个效果，其实原理差不多；
当滑块距离顶部的距离加上 页面高度 大于等于总高度的时候，就说明到了最底部；
（说的不全面，太片面，希望大佬留言指正）；
接下来就是写ajax请求了，就是最基本的样式。
里面的data-original是我自定的属性、储存图片地址；
src里放的地址是图片还没有加载出来时，显示的加载动画
（我这里请求的地址，是我搭建的一个本地数据。如果不知道的可以去看一下我写的另一个关于json：server 搭建的一个博客）
接下来就是我们去下载jquery的插件lazyload的插件了（下载地址：http://www.jq22.com/jquery-info390）
然后我们引入它
这样我们页面上就会出现我们请求的信息了。并且展示出来。
我们还可以在下面加一个淡入淡出的效果
接下来把我们写的ajax请求放在一个函数里；
在接下了就是判断是否滑块滑到最低部。
其中我有俩处写有我命名的函数 。第一个是开始触发一次请求，二是当滑块滑动到最底部是触发请求。
开始调用请求的原因是。我写的一个分段，开始让他只加载5条
这样就完成了全部。写的有点乱，看的时候捋一捋的看看。嘿嘿！
转载于:https://www.cnblogs.com/chenyudi/p/11031608.html
图片懒加载、ajax异步调用数据、lazyload插件的使用相关推荐
- 小程序之图片懒加载[完美方案，你不来看看？]
效果图 既然来了,把妹子都给你. 定义 懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 实现原理 监 ...
- js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
- swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
- 小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
- 什么事图片懒加载？如何实现图片懒加载？
随着移动设备和网络技术的不断发展,网页设计也在不断地进化.其中,一项重要的技术就是图片懒加载(Lazy Load),它可以提高网站的加载速度和用户体验.本文将深入探讨图片懒加载的定义.原理.优势.实现 ...
- vue 图片拖动加载 类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
- 图片懒加载以及数据懒加载
当一个单页面应用加载发送的请求很多时,页面可能会出来的很慢影响用户体验,此时我们就可以对项目进行优化,使用数据懒加载以及图片懒加载优化网络性能.懒加载的原理是当组件对象或者Dom对象出现在可视区域的时 ...
- mint-ui 图片懒加载及请求数据加载中提示方法
图片懒加载: 引入需要的文件 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></scr ...
- 数据懒加载和图片懒加载
数据懒加载是项目优化的一种类型 主要是监听, 监听的 DOM 元素是否有进入可视区 进入了可视区就可以做一些事情, 如: 发送请求, 返回出数据 离开可视区停止对 DOM 元素的监听 首先我们使用的是 ...
- 分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
最新文章
- 你们是不是真的很缺大数据工程师？
- SQL 2005启用组件Ad Hoc Distributed Queries
- 2014广州赛区比赛总结
- mongodb json_在MongoDB和Spring Batch中将XML转换为JSON和原始使用
- MS SQL Server2008大数、小数转varchar
- Java加密与解密的艺术~安全协议~单向认证服务
- JSF MVC 流程
- 《CSDN好师父》给你更好选择：“深圳工资、长沙房价、全球视野”
- 突发 , 谷歌官宣安卓改名了！
- [R语言绘图]气泡图symbols
- Linux下使用dos2unix修改目录中文件格式
- Aug.2019_Memory
- VUE 对@click的认识
- 【Unity】在Inspector上显示自定义的位掩码枚举（Flags）
- 头条面试题：判断一个数是否是happy number(每一位的平方和最终为1)
- liferay6.2 使用默认方式实现可配置的portlet
- 生物信息学缘起——linux篇（六）for和while循环
- 华为vrrp默认优先级_网关冗余VRRP
- webpack css-loader style-loader scss-loader cssloader模块化
- python语言strip的作用_Python语言中的strip()的理解