关于这个效果还是很简单的,样式部分我就不多说了,我就简单的写了一下布局,

这是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插件的使用的更多相关文章

  1. 原生js - 两种图片懒加载实现原理

    目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...

  2. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  3. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  4. 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  5. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  6. 爬虫之图片懒加载技术及js加密

    图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...

  7. 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...

  8. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  9. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  10. 图片懒加载,Selenium,PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...

随机推荐

  1. redis基础二----操作hash

    上面usr就是hash的名字,usr这个hash中存储了key 为id.name和age的值 一个hash相当于一个数据对象,里面可以存储key为id name age的值 2.批量插入一个hash数 ...

  2. Vue数据更新页面没有更新问题总结

    Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...

  3. el-table表头与内容右边框错位问题

    在用element写一个后台管理系统时遇到一个坑,el-table标签渲染出数据后表头th和内容会有错位,之前没有的 修改大小都没用 于是看百度搜索一波最终解决修改之前 虽然不大 但是别扭 在全局添加 ...

  4. Electron: 如何以 Vue.js, Vuetify 开始应用

    Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 ...

  5. git和github入门指南(3.1)

    3.远程管理 3.1.远程仓库相关命令 1.查看远程仓库名字,这里以github为例 git remote 上面命令执行后会得到:origin,这样一个名字,这个名字是我们克隆的时候默认设置好的 如果 ...

  6. JQuery UI - draggable参数中文详细说明

    概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...

  7. Kali Day1

    一.最新版本的Kali Linux的账号名和密码都是kali. 如何切换root  步骤如下: 1. 设置密码 sudo passwd root 2. 切换身份 su 3. 图示 二.快捷键 1. K ...

  8. windows7 添加tomcat(解压缩版或者免安装版)自启动服务

    https://blog.csdn.net/piggachen/article/details/69943223 :(service.bat方式安装服务或者windows任务方式添加) https:/ ...

  9. java语言进阶(三)_List_Set_数据结构_Collections

    主要内容 数据结构 List集合 Set集合 Collections 第一章 数据结构 1.1 数据结构有什么用? 常见的数据结构:堆.栈.队列.数组.链表和红黑树 . 1.2 常见的数据结构 栈 栈 ...

  10. VMware实现宿主机和虚拟机处于同一网段

    打开虚拟网络编辑器 选择VMnet0桥接模式,在VMnet信息中,选择可以选择的网卡,然后保存. 打开虚拟机设置,在“硬件”选项卡的网络适配器中选择桥接模式即可.