我有一些作业要使用 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>
1 回答
qq_花开花谢_0
TA贡献1835条经验 获得超7个赞
由于下一行，您的图像已损坏：
img.src = img.dataset.src;
您img没有数据集属性 - 因此src设置为未定义。
首先你要明白，你用JSP写的东西最后会被编译成HTML代码交给浏览器。
因此，下一个代码片段将被翻译成一系列<img />标签并提供给您的浏览器——您的浏览器将下载所有这些标签：
<c:forEach var="item" items="${list}">
<img class="lazy"src="<c:url value="${item.picture}"/>"/>
</c:forEach>
所以这不是延迟加载。
您可以创建一个 HTTP 端点，该端点将返回要在滚动或调整大小事件上加载的图像列表 - 然后在您的 JS 中动态加载它们。
像这样的东西：
function loadImages(images) {
var src = document.getElementById("image-container");
images.foreach(function(imageUrl) {
var img = document.createElement("img");
img.src = "image.png";
src.appendChild(img);
});
}
添加回答
举报
0/150
提交
取消