lazyload.js实现图片懒加载
前言:当我们需要加载大量图片的时候,如果我们直接显示全部的图片会给服务器造成大量的资源浪费,也会消耗大量的流量。如果能实现当页面滚动时动态加载图片,那么就能节省大量的资源,这就需要用到图片懒加载技术。
下面是几个简单的步骤:
1、 导入jquery.js和lazyload.js的包
<script type="text/javascript"
src="bootstrap-3.3.7-dist/js/jquery-2.1.1.js"></script>
<script type="text/javascript"
src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script>
2、属性说明:
placeholder : ‘img/aaa.jpg’, 页面最初以这张图片撑起整个框架,当页面滚动时在将要显示在那的图片填补上去。
effect : “fadeIn”, //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)。
threshold : 180, //预加载,在图片距离屏幕180px时提前载入。
event: ‘click’, // 事件触发时才加载,click(点击),mouseover(鼠标过),sporty(运动的),默认为scroll(滑动)。
container: $(“#container”), // 指定对某容器中的图片实现效果。
failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载。
这是body中的元素,一定要用data-original="${obj.picture}",这里是可以直接放图片的路径的。我是取作用域中的图片路径。
<img class="lazy" width="150px" height="200" data-original="${obj.picture}" />
3、详细代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
src="bootstrap-3.3.7-dist/js/jquery-2.1.1.js"></script>
<script type="text/javascript"
src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/tmj.css" />
</head>
<body>
<div class="container">
<c:forEach items="${bookList}" var="obj">
<div class="box">
<div class="pic">
<img class="lazy" width="150px" height="200"
data-original="${obj.picture}" />
</div>
<div>
<center>
<span><a href="javascript:void(0)"
title="${obj.description}">简介</a> </span>
<span id="price">¥${obj.price}</span>
</center>
</div>
</div>
</c:forEach>
</div>
</body>
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload( {
//设置占位符,可以用img标签的src属性引入一个图片,替代未进去显示区域的待加载图片
placeholder : 'img/aaa.jpg',
effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)
//threshold : 180, //预加载,在图片距离屏幕180px时提前载入
//event: 'click', // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动)
//container: $("#container"), // 指定对某容器中的图片实现效果
// failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况container: $("#container"), // 指定对某容器中的图片实现效果
});
});
</script>
</html>
4、项目截图
5、如果页面加载的速度比较快的话可能不会很明显的看到图片懒加载效果。可以通过右键-》检查-》network-》off line(选择 slow 3G),可以清晰的看到效果。
如有不足之处,还请大家多多指教!!!