jquery 插件实现图片延迟加载效果代码

BJBJabcd

BJBJabcd

2016-02-19 13:54

下面是个超简单的jquery 插件实现图片延迟加载效果代码教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~
减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。
比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。
如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。
如何使用,引用如下js:
查看源代码打印帮助

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
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像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

我们还可以通过定义effect 参数来定义一些图片显示效果
查看源代码打印帮助

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

下载地址: source, minified or packed
展开更多 50%)
分享

猜你喜欢

jquery 插件实现图片延迟加载效果代码

Web开发
jquery 插件实现图片延迟加载效果代码

jquery.lazyload 实现图片延迟加载jquery插件

Web开发
jquery.lazyload  实现图片延迟加载jquery插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery.lazyload.js实现图片延迟加载插件

Web开发
jquery.lazyload.js实现图片延迟加载插件

Lazy Load 延迟加载图片的 jQuery 插件

Web开发
Lazy Load 延迟加载图片的 jQuery 插件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ImagesLazyLoad 图片延迟加载效果

Web开发
ImagesLazyLoad 图片延迟加载效果

jQuery插件 tabBox实现代码

Web开发
jQuery插件 tabBox实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JQuery Dialog(JS 模态窗口,可拖拽的DIV)

JQuery Dialog(JS 模态窗口,可拖拽的DIV)

在Oracle中重编译所有无效的存储过程

在Oracle中重编译所有无效的存储过程
下拉加载更多内容 ↓