图片延迟加载技术

图片延迟加载技术

这里写图片描述

当访问一个页面的时候,先把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’获取。
这里写图片描述

猜你喜欢

转载自blog.csdn.net/sinat_15153911/article/details/80714020