图片懒加载、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条
这样就完成了全部。写的有点乱,看的时候捋一捋的看看。嘿嘿!
图片懒加载、ajax异步调用数据、lazyload插件的使用的更多相关文章
- 原生js - 两种图片懒加载实现原理
目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- 基于javascript实现图片懒加载(亲测有效)
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS
引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- 图片懒加载,Selenium,PhantomJS
引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...
随机推荐
- 微信小程序-超出部分显示省略号(单行与多行)
/*单行*/ .work_font{ display:block /*这里设置inline-block或者block:根据使用情况来定(行内元素需要加这个,块级元素和行内块级可以不用)*/ white ...
- SQL注入之Boolean型盲注
什么是Boolean型注入 Boolean型的注入意思就是页面返回的结果是Boolean型的,通过构造SQL判断语句,查看页面的返回结果是否报错,页面返回是否正常等来判断哪些SQL判断条件时成立的,通 ...
- 基数排序(Java)
基数排序(Java) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 基数排序(桶排序)介绍 基数排序(radix sort)属 ...
- cf # 420 div.2
说说题吧前两道暴力 a直接枚举每个位置然后枚举所在行和列 b直接枚举所有的x的banana 的数量.计算方式等差数列求和小学生难度.记得long long.int转longlong c记下remove ...
- egret的WebView实现
需求 在egret中嵌入网页,类似 . 网上大概有两种思路吧,一种是直接在body里面加入iframe,如:[Egret]里使用iframe标签达到内嵌多个web界面;另一种就是通过模仿htmlinp ...
- mybatis源码配置文件解析之五:解析mappers标签(解析XML映射文件)
在上篇文章中分析了mybatis解析<mappers>标签,<mybatis源码配置文件解析之五:解析mappers标签>重点分析了如何解析<mappers>标签中 ...
- Markdown-it-latex2img
Markdown-it-latex2img LaTex plugin for markdown-it markdown parser,Server side MathJax Renderer. Bac ...
- 一.2.序列化使用之用户资源功能app
1.环境准备:(1).新建功能app: (python36env) [vagrant@CentOS7 devops]$ python manage.py startapp users ---建议以后用 ...
- 一.1搭建跨平台的统一python开发环境
搭建跨平台的统一python开发环境: 使用开发环境的好处: 可不用在服务器上直接修改源代码---写的代码首先得入版本库(放git或giitlab中),在本地写代码提交到git中.然后在服务器上git ...
- 循环中的自变量-break和continue
1.break 作用:break 用于终止循环的执行, 过程:当执行到break语句后,程序将跳出循环,执行循环语句后边的代码 i=1 while i<10: if i==5: break pr ...