用lazyload.js实现图片懒加载_lazyload.js实现下拉加载图片-优快云博客

本文链接：https://blog.youkuaiyun.com/LINXISHUIJI/article/details/81432660

本文介绍了如何利用lazyload.js实现图片懒加载，以减少服务器资源浪费和流量消耗。通过设置placeholder图片、效果类型、预加载距离、触发事件和容器范围等参数，可以在图片进入可视区时动态加载。在页面加载速度较快的情况下，可通过模拟慢速网络查看懒加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)，可以清晰的看到效果。

如有不足之处，还请大家多多指教！！！