图片懒加载、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条

这样就完成了全部。写的有点乱,看的时候捋一捋的看看。嘿嘿!

猜你喜欢

转载自www.cnblogs.com/chenyudi/p/11031608.html