Question

我有一些功课可以使使用JSP-Servlet的“延迟加载”装备到我的Java项目中。我还没有学习前端开发，所以我很难完成这项任务。当我运行网络时，它会加载所有图像，但在我滚动浏览后，图像会损坏。我不能在该项目中使用任何库，是否有解决此问题的解决方案？

这是我的前端代码：

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

<%-- 
    Document   : shopping
    Created on : Aug 26, 2018, 11:10:09 AM
    Author     : HiruK
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="tbl_machine.Tbl_machineDAO" %>
<%@page import="tbl_machine.Tbl_machineDTO" %>
<%@page import="java.util.List" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" type="text/css" href="css/table.css">
        <link rel="stylesheet" type="text/css" href="css/center.css">
        <script src="js/lazyLoading.js"></script>
    </head>
    <body>
        <h1>Shopping here!</h1>
        <c:set var="list" value="${sessionScope.IMAGELIST}"/>
        <c:if test="${not empty list}">
            <c:forEach var="item" items="${list}">
                <img class="lazy"src="<c:url value="${item.picture}"/>"/>
            </c:forEach>
        </c:if>
        <a href="member.jsp">Click here to back main page</a>
    </body>
    
</html>

Answer 1

您的图片由于下一行而损坏：

r'\b\d{1,2}(?:\W+\d{1,2})?\W+(?:year|month)s?\b'

您的img.src = img.dataset.src;没有数据集属性-因此img设置为undefinded。

首先，您必须了解，您在JSP中编写的内容最后被编译为HTML代码，并提供给浏览器。
因此，下一个代码片段将转换为一系列src标签，并提供给您的浏览器-您的浏览器将下载所有这些标签：

<img />

因此它不是延迟加载。

您可以创建一个HTTP端点，该端点将返回要在滚动或调整大小事件上加载的图像列表，然后将其动态加载到JS中。

类似这样的内容：

<c:forEach var="item" items="${list}">
    <img class="lazy"src="<c:url value="${item.picture}"/>"/>
</c:forEach>

请阅读以下内容以获取有关AJAX的更多信息：this regex demo

如何在JSP-Servlet中执行延迟加载？

1 个答案: