jquery 插件实现图片延迟加载效果代码
比如你打开一个比较大或者长的网页,那么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
您可能感兴趣的文章:
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
jQuery图片预加载(延迟加载)插件Lazy Load
jquery插件lazyload.js延迟加载图片的使用方法
js 延迟加载提高网页加载速度的实现方法
jquery 延迟执行的实例分享
网页前端优化之滚动延时加载图片示例
jquery的$(document).ready()与onload的加载顺序分析
jQuery实现等比例缩放大图片让大图片自适应页面布局
H5 C3如何优化前端界面
jcrop基本参数一览