图片延迟加载技术
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
只需引用一个jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 延时加载 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/lazyload/jquery.lazyload.js"></script>
<script type="text/javascript">
var Img = "images/lazyload/lazyload.gif";
var jQuery_lazyload = $.noConflict(true);
jQuery_lazyload(document).ready(function(){
jQuery_lazyload(".load_img").lazyload({placeholder:Img,effect:"fadeIn"});
});
</script>
</head>
</html>
用法:
<img class="load_img" src="${pageContext.request.contextPath}/${img}">
图片img加个class样式
需要本文资源可关注微信号艳辉网 回复关键字‘java160’获取。