jquery Loading图片延迟加载特效
16lz
2021-01-22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片延迟加载</title>
<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/1.jpg" /></li>
<li><img originalsrc="images/2.jpg" /></li>
<li><img originalsrc="images/3.jpg" /></li>
<li><img originalsrc="images/4.jpg" /></li>
<li><img originalsrc="images/5.jpg" /></li>
<li><img originalsrc="images/6.jpg" /></li>
</ul>
</div>
</body>
更多相关文章
- css3+html5——拼接图片中icon的使用、照片轮换（没写完）、视频、音
- 急！html中用图片做背景死活显示不了啊！网上的答案都解决不了！
- 使用jQuery和AJAX从JSON文件加载数据
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行，特殊符号，列
- html+css 图片右上角加删除叉，图片删除
- IOS学习之WebView加载本地HTML代码或网络资源
- HTML5实现图片预览功能
- HTML5/CSS3系列教程：使用SVG图片
- JQuery从动态内容加载动态内容