废话不多说直接进入正题
有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件
插件的使用方法很简单(依赖jquery):引入lazyload.js(压缩版才4KB)
对我们想要延迟加载的图片添加lazy样式,用”data-original” 替换图片的引用路径
一、引入jquery.js和lazyload.js插件,代码如下:
<!-- 引入jQuery.js -->
<script src="./jquery_lazyload/jquery-1.11.0.min.js"></script>
<!-- 引入lazyload.js插件 -->
<script src="./jquery_lazyload/jquery.lazyload.js"></script>
二、在js中引入相应的插件,代码如下:
<script>
$(function() {
$().ready(function(){
//可任意选择你想延迟加载的目标元素,例如直接使用样式名lazy作为选择条件
$("img .lazy").lazyload({
placeholder : "img/grey.gif", //占位图,加载出来之前的图片
effect: "fadeIn", // 加载效果
threshold: 200, // 提前加载
event: 'click', // trigger
container: $("#container"), //指定容器
failurelimit : 5 // 发生混乱时的hack手段
})
})
})
<script>
三、详细参数的具体说明如下:
参数 | 作用 | 说明 |
placeholder | 占位图片 | 图片路径值,图片加载时占位图自动隐藏 |
effect | 图片载入时动画效果 | 值有show(直接显示),fadeIn(淡入),slideDown(滑入)等jq常用效果 |
threshold | 提前开始加载高度 | 数字值,是离需要加载目标的高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,避免用户看到图片加载过程 |
event | 图片加载trigger | 值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…) |
container | 指定容器 | lazyload默认在滚动浏览器滚动条时生效,这个参数可以让你在滚动某DIV的滚动条时执行懒加载 |
failurelimit | 提高稳定性 | 若是某一张该被加载的图片未能正确加载,则加载其后的第N张图 |
四、帮组小白便于理解,完整代码奉上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img class="lazy" data-original="图片地址" width="500" height="500">
<img class="lazy" data-original="图片地址" width="500" height="500">
<img class="lazy" data-original="图片地址" width="500" height="500">
<img class="lazy" data-original="图片地址" width="500" height="500">
<img class="lazy" data-original="图片地址" width="500" height="500">
<img class="lazy" data-original="图片地址" width="500" height="500">
<img class="lazy" data-original="图片地址" width="500" height="500">
<!-- 引入jQuery.js -->
<script src="./jquery_lazyload/jquery-1.11.0.min.js"></script>
<!-- 引入lazyload.js插件 -->
<script src="./jquery_lazyload/jquery.lazyload.js"></script>
<script>
$(function() {
$("img.lazy").lazyload({
placeholder:"占位图片地址",
effect: "fadeIn",/*进入效果*/
});
});
</script>
</body>
</html>
完毕,在下告辞!不用留我吃饭!!!