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

我有一些作业要使用 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>

</head>

慕仙森

浏览 168回答 1

1回答

qq_花开花谢_0

由于下一行，您的图像已损坏：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 0

随时随地看视频慕课网APP