jQuery图片延迟加载插件
在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量。
使用图片延时加载插件就解决这些问题。
方法:
引入jquery和插件文件
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
图片代码设置
<img class="lazy" src="未加载前的图片地址" original="要显示的图片地址">
js调用
$("img.lazy").lazyload();
Lazyload属性:
threshold:值为number,图片离屏幕多少像素时开始提前加载;
event:值为String,使图片显示的事件,支持jQuery的所有事件,也可以是自定义事件。如:设置event为click,则需要点击占位符图片才能让图片显示;
effect:值为String,图片显示的效果,默认值为show。支持jQuery的fadeIn, slideDown;
container:值为String,使某容器内的使用延迟加载,容器内需要有滚动条;
$("img.lazy").lazyload({ threshhold:100, effect:"fadeIn" });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。