JavaScript ---- 懒加载demo
2016-07-26 15:42
435 查看
<!DOCTYPE HTML> <html> <head> <title>延时加载</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/lazyload/jquery.lazyload.js"></script> <style type="text/css"> ul,li{list-style:none} img{width:100%;} </style> <script type="text/javascript"> $(function() { $("img").lazyload({ placeholder : "js/lazyload/grey.gif", //用图片提前占位 effect : "fadeIn",//载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold : -50 //提前开始加载 }); }); </script> </head> <body bgcolor="#eee"> <div style="width:1000px;margin:0 auto;"> <ul> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> <li><img src="http://img1.gtimg.com/henan/pics/hv1/61/203/2098/136474276.jpg" alt=""></li> </ul> </div> </body> </html>
相关文章推荐
- 廖雪峰JS教程--对象
- Javascript 二维数组去重
- 如何解决jsp:include标签在包含html文件时遇到的乱码问题
- JS模板laytpl
- 时间处理总结(三)javascript与WCF
- js去掉字符串中的空格---用正则表达式;
- 转:js中this关键字详解
- javascript 0000000序列递增算法
- js图片上传预览
- [javascript权威指南][阅读笔记]事件处理
- js加载顺序
- 理解javascript中的MVVM开发模式
- 关于js动态插入script 标签后页面JS代码执行失败的解决方法
- javascript 抽奖列表随机排序算法
- jsp页面的构成
- 深入理解JavaScript MVC 框架
- Javascript高级程序设计复习——第五章引用类型 【原创】
- javascript读取出字符串中每个字符出现次数
- JavaScript
- js注意事项08