jquery 插件实现图片延迟加载效果代码
jquery 插件实现图片延迟加载效果代码
发布时间:2016-12-30 来源:查字典编辑
摘要:减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jqu...

减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。

比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。

如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。

如何使用,引用如下js:

查看源代码打印帮助

复制代码 代码如下:

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

在你的页面中加入如下的javascript:

查看源代码打印帮助1 $("img").lazyload();

这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。

当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

查看源代码打印帮助

复制代码 代码如下:

$("img").lazyload({

placeholder : "img/grey.gif",

event : "click"

});

我们还可以通过定义effect 参数来定义一些图片显示效果

查看源代码打印帮助

复制代码 代码如下:

$("img").lazyload({

placeholder : "img/grey.gif",

effect : "fadeIn"

});

下载地址: source, minified or packed

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类