图片延迟加载

</pre><pre name="code" class="html"><script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {("img").delayLoading({
defaultImg: "images/loading.jpg", // 预加载前显示的图片
errorImg: "", // 读取图片错误时替换图片(默认:与defaultImg一样)
imgSrcAttr: "originalSrc", // 记录图片路径的属性(默认:originalSrc,页面img的src属性也要替换为originalSrc)
beforehand: 0, // 预先提前多少像素加载图片(默认:0)
event: "scroll", // 触发加载图片事件(默认:scroll)
duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal"
container: window, // 对象加载的位置容器(默认:window)
success: function (imgObj) { }, // 加载图片成功后的回调函数(默认:不执行任何操作)
error: function (imgObj) { } // 加载图片失败后的回调函数(默认:不执行任何操作)
});
});
</script>
<style type="text/css">
.box{ width:1200px; margin:0 auto;}
.box ul li { width:245px; height:245px; float:left; margin:10px; border:1px solid #e6e6e6; list-style:none; }
.box ul li img{ width:100%; min-height:245px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img originalsrc="images/hua_8.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_2.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/1_030ZTF23528.jpg" /></li>
<li><img originalsrc="images/1_1225092K5R48.jpg" /></li>
<li><img originalsrc="images/1_122FU1035612.jpg" /></li>
<li><img originalsrc="images/_30.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/hua_8.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_2.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/1_030ZTF23528.jpg" /></li>
<li><img originalsrc="images/1_1225092K5R48.jpg" /></li>
<li><img originalsrc="images/1_122FU1035612.jpg" /></li>
<li><img originalsrc="images/_30.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/16.jpg" /></li>
<li><img originalsrc="images/17.jpg" /></li>
<li><img originalsrc="images/18.jpg" /></li>
<li><img originalsrc="images/19.jpg" /></li>
</ul>
</div>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,646评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,891评论 0 1
  • 在日常的抓取工作当中,经常看到网站为了减轻网页加载所需资源对图片等资源进行延迟加载。那什么样的页面需要用到延迟加载...
    苏敏阅读 674评论 2 5
  • 你从别人上看到的其实就是你自己 我们对别人的意见,主要是取决于他们使我们看清自己什么,而不是我们如何看他们。 你所...
    遇到全然自由的自己阅读 269评论 0 1